Getting Started

Installation

Add Composify to your project using your favorite package manager:

npm

npm install @composify/react --save

1. Register your components

Before you can use a component in the Editor or Renderer, you need to register it in the Composify catalog.

catalog.tsx

import { Catalog } from '@composify/react/renderer';
import { FC } from 'react';
 
type Props = {
  textAlign: 'left' | 'center' | 'right';
  children: string;
};
 
const Text: FC<Props> = ({ textAlign, children }) => (
  <p style={{ textAlign }}>{children}</p>
);
 
Catalog.register('Text', {
  component: Text,
  props: {
    textAlign: {
      label: 'Text Align',
      type: 'radio',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
      default: 'left',
    },
    children: {
      label: 'Text',
      type: 'string',
      default: 'Hello, world!',
    },
  },
});

Important: Make sure this catalog file is imported at the entry point of your app (like index.tsx or app.tsx) so your components are registered.

For more options and advanced configurations, check out the Catalog docs.

2. Render your components

Once registered, you can render any JSX content with the Renderer component. Just pass a JSX string to the source prop, and we'll take care of the rest.

page.tsx

import { Renderer } from '@composify/react/renderer';
 
const source = `
  <Text textAlign="left">Hello, world!</Text>
`;
 
export const Page = () => (
  <Renderer source={source} />
);

You can also mix in any basic HTML tags — no need to register them:

page.tsx

import { Renderer } from '@composify/react/renderer';
 
const source = `
  <div>
    <h1>Welcome to Composify!</h1>
    <Text textAlign="center">This is a simple example.</Text>
  </div>
`;
 
export const Page = () => (
  <Renderer source={source} />
);

3. Edit visually

To edit JSX in a visual way, use the Editor component. Just like the Renderer, you pass your JSX string to the source prop.

editor.tsx

import { Editor } from '@composify/react/editor';
import '@composify/react/style.css';
 
const source = `
  <div>
    <h1>Welcome to Composify!</h1>
    <Text textAlign="center">This is a simple example.</Text>
  </div>
`;
 
export const Page = () => (
  <Editor title="Lorem Ipsum" source={source} onSubmit={console.log} />
);

Don't forget to import the necessary styles for the editor to look right.

editor.tsx

import '@composify/react/style.css';

For more details, check out the Editor docs