Skip to content
On this page

Using Penrose with React

@penrose/components is a React component library for Penrose. To install:

npm i @penrose/components
yarn add @penrose/components

Also, make sure you have react and react-dom as dependencies. @penrose/components has both packages as peer dependencies and does not bundle them:

npm i react react-dom
yarn add react react-dom

For a minimal example, try using the Simple component in your React application:

import { Embed } from "@penrose/components";

const domain = `
type Set

const substance = `
Set A
AutoLabel All

const style = `
canvas {
  width = 500
  height = 500
forall Set X {
  X.shape = Circle { }
  X.text  = Text { string: X.label }
  ensure contains(X.shape, X.text)

const App = () => (
  <Embed domain={domain} substance={substance} style={style} variation={""} />

export default App;

For a full list of exported components and examples, refer to the storybook.

Released under the MIT License.