### Run Mock API with json-server

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/prerequisites.md

Command to start the json-server API, which serves the `database.json` file as a RESTful API. The API will be accessible at the specified port.

```bash
npx json-server --watch database.json --port 9000
```

--------------------------------

### Install Composify Package

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/cloud.md

Install the Composify React package using npm, pnpm, or yarn. This package provides the necessary tools for integrating Composify Cloud into your React applications.

```bash
npm install @composify/react --save
```

```bash
pnpm add @composify/react
```

```bash
yarn add @composify/react
```

--------------------------------

### Render Pages from Composify Cloud (React Router)

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/cloud.md

Fetch and render page content from Composify Cloud using the Renderer component within a React Router setup. This example uses loader functions to fetch data and throws a 404 response if content is missing.

```tsx
/* app/routes/page.tsx */
import '~/components/catalog';

import { Renderer } from '@composify/react/renderer';
import { type LoaderFunctionArgs, useLoaderData } from 'react-router';

export async function loader({ params }: LoaderFunctionArgs) {
  const slug = params.slug ?? '';

  const res = await fetch(`https://pages.composify.cloud/[your-org-id]/${slug}`);
  const { content } = await res.json().catch(() => ({}));

  if (!content) {
    throw new Response('', { status: 404 });
  }

  return { slug, content };
}

export default function Page() {
  const { content } = useLoaderData<typeof loader>();

  return <Renderer source={content} />;
}
```

--------------------------------

### Query Data from Mock API using curl

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/prerequisites.md

Demonstrates how to retrieve specific document data from the running json-server API using the `curl` command.

```bash
curl http://localhost:9000/documents/foo
```

--------------------------------

### Setup Mock Database with JSON

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/prerequisites.md

Defines the structure of the mock database file (`database.json`) used to store UI document layouts. It specifies that the `content` field holds raw JSX strings.

```json
{
  "documents": [
    {
      "id": "foo",
      "content": "<VStack backgroundColor=\"#f8fafc\" />"
    }
  ]
}
```

--------------------------------

### Start Development Server with npm

Source: https://github.com/composify-js/composify/blob/main/examples/react-router/README.md

Starts the development server, enabling Hot Module Replacement (HMR) for a streamlined development experience. The application will be accessible at http://localhost:5173.

```bash
npm run dev
```

--------------------------------

### Install @composify/react

Source: https://github.com/composify-js/composify/blob/main/README.md

Installs the @composify/react package using npm, pnpm, or yarn. This is the first step to integrate Composify into your React project.

```bash
# npm
$ npm install @composify/react --save

# pnpm
$ pnpm add @composify/react

# yarn
$ yarn add @composify/react
```

--------------------------------

### Run Development Server (Bash)

Source: https://github.com/composify-js/composify/blob/main/examples/nextjs/README.md

Commands to start the Next.js development server using different package managers. This allows for local development and live preview of changes.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Install Composify React Package

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/blog/2025-10-26-introducing-composify.md

Installs the Composify React renderer and editor package using npm. This is the first step to integrating Composify into a React application.

```bash
npm install @composify/react
```

--------------------------------

### Import Composify Editor Styles

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/getting-started.md

Import the necessary CSS styles for the Composify Editor component to function correctly. This ensures the editor is displayed with proper styling.

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

--------------------------------

### Add Data to Mock API using curl

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/prerequisites.md

Shows how to add new document data to the mock database via the json-server API using a POST request with `curl` and a JSON payload.

```bash
curl -X POST http://localhost:9000/documents \
  -H "Content-Type: application/json" \
  -d '{
    "id": "bar",
    "content": "<VStack><Heading level={2}>About Us</Heading></VStack>"
  }'
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/composify-js/composify/blob/main/examples/react-router/README.md

Installs the necessary project dependencies using the npm package manager. This is a prerequisite for developing and building the application.

```bash
npm install
```

--------------------------------

### Enable Visual Editing with Composify Editor

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/getting-started.md

Enable visual editing of content using the Composify Editor component. It takes a 'source' prop for the content and an 'onSubmit' callback to handle content changes.

```jsx
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} />
);
```

--------------------------------

### Set Up Composify Visual Editor (React Router)

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/cloud.md

Integrate the Composify Cloud visual editor into a React Router application using the CloudEditor component. This setup requires importing the core styles and registering your component catalog.

```tsx
/* app/routes/composify-editor.tsx */
import '~/components/catalog';
import '@composify/react/style.css';

import { CloudEditor } from '@composify/react/editor';

export default function EditorPage() {
  return <CloudEditor />;
}
```

--------------------------------

### Custom Save and Publish Buttons using renderControl in Composify JS

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/editor/custom-controls.md

This example shows how to create multiple custom controls, 'Save' and 'Publish', by leveraging the `renderControl` prop. The `getSource` callback is used for the 'Save' action, while 'Publish' might trigger a separate handler. This approach offers granular control over editor actions and requires a React setup with Composify.

```tsx
<Editor
  title="Demo"
  source={source}
  renderControl={getSource => (
    <HStack gap={8}>
      <Button variant="secondary" onSubmit={() => handleSave(getSource())}>
        Save
      </Button>
      <Button variant="primary" onSubmit={handlePublish}>
        Publish
      </Button>
    </HStack>
  )}
/>
```

--------------------------------

### Render Content with Composify Renderer

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/getting-started.md

Render content defined as a JSX string using the Composify Renderer component. This component takes a 'source' prop containing the JSX to be displayed.

```jsx
import { Renderer } from '@composify/react/renderer';

const source = "
  <Text textAlign=\"left\">Hello, world!</Text>
";

export const Page = () => (
  <Renderer source={source} />
);
```

```jsx
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} />
);
```

--------------------------------

### Set Up Composify Visual Editor (Next.js)

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/cloud.md

Implement the visual editor for Composify Cloud in a Next.js application using the CloudEditor component. Remember to import the necessary CSS styles and ensure your component catalog is registered.

```tsx
/* app/composify-editor/page.tsx */
'use client';

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

import { CloudEditor } from '@composify/react/editor';

export default function EditorPage() {
  return <CloudEditor />;
}
```

--------------------------------

### Render Pages from Composify Cloud (Next.js)

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/cloud.md

Fetch and render page content from Composify Cloud using the Renderer component in a Next.js application. Ensure your catalog is imported and handle cases where content is not found.

```tsx
/* app/[slug]/page.tsx */
import '@/components/catalog';

import { Renderer } from '@composify/react/renderer';
import { notFound } from 'next/navigation';

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;

  const res = await fetch(`https://pages.composify.cloud/[your-org-id]/${slug}`, {
    cache: 'no-store',
  });
  const { content } = await res.json().catch(() => ({}));

  if (!content) {
    return notFound();
  }

  return <Renderer source={content} />;
}
```

--------------------------------

### Catalog Registration for Radio Property in TypeScript

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/catalog/properties/radio.mdx

Shows how to register a 'Radio' property type within a catalog system using TypeScript. This example defines the property's label, type, and options, suitable for use in a component library or design system.

```typescript
Catalog.register('Sample', {
  component: Sample,
  props: {
    alignment: {
      label: 'Alignment',
      type: 'radio',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
  },
});

```

--------------------------------

### Boolean Property Control Example (React)

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/catalog/properties/boolean.mdx

This snippet demonstrates the basic usage of the PropertyControlBoolean component from '@composify/react/editor'. It shows how to manage a boolean state using useState and how the component updates this state via the onChange callback.

```tsx
import '@composify/react/style.css';
import { PropertyControlBoolean } from '@composify/react/editor';
import { useState } from 'react';

export const BasicUsage = () => {
  const [value, setValue] = useState(false);

  return (
    <PropertyControlBoolean
      name="example"
      spec={{
        label: 'Visible',
        type: 'boolean',
      }}
      value={value}
      onChange={(_, next) => setValue(next)}
    />
  );
};
```

--------------------------------

### Register React Components with Composify Catalog

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/getting-started.md

Register custom React components to be used within the Composify Editor and Renderer. This involves defining the component, its props, and their types and default values.

```jsx
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!',
    },
  },
});
```

--------------------------------

### Build for Production with npm

Source: https://github.com/composify-js/composify/blob/main/examples/react-router/README.md

Creates a production-ready build of the application, optimizing assets and code for deployment. This command generates the necessary files in the `build/` directory.

```bash
npm run build
```

--------------------------------

### Build Docker Image

Source: https://github.com/composify-js/composify/blob/main/examples/react-router/README.md

Builds a Docker image for the application, tagging it as 'my-app'. This image can then be used to containerize and deploy the application.

```bash
docker build -t my-app .
```

--------------------------------

### Run Docker Container

Source: https://github.com/composify-js/composify/blob/main/examples/react-router/README.md

Runs the Docker container created in the previous step, exposing the application on port 3000. This allows for testing the containerized application locally.

```bash
docker run -p 3000:3000 my-app
```

--------------------------------

### Composify Catalog Initialization

Source: https://context7.com/composify-js/composify/llms.txt

This file is responsible for importing and initializing various catalog components for Composify. It ensures that components like Body, Heading, and VStack are registered and available for use.

```typescript
// components/catalog.ts
import './Body/BodyCatalog';
import './Heading/HeadingCatalog';
import './VStack/VStackCatalog';
```

--------------------------------

### Basic Usage of PropertyControlObject - React

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/catalog/properties/object.mdx

Illustrates a basic usage of the PropertyControlObject component from '@composify/react/editor'. This example shows how to manage the state of an object property, which includes a label and a primary boolean flag.

```jsx
import '@composify/react/style.css';
import { PropertyControlObject } from '@composify/react/editor';
import { useState } from 'react';

export const BasicUsage = () => {
  const [value, setValue] = useState({ label: 'Click me', primary: true });

  return (
    <PropertyControlObject
      name="example"
      spec={{
        label: 'Actions',
        type: 'object',
        fields: {
          label: { label: 'Label' , type: 'text' },
          primary: { label: 'Primary', type: 'boolean' },
        },
      }}
      value={value}
      onChange={(_, next) => setValue(next ?? {})}
    />
  );
};
```

--------------------------------

### Custom Rendering with PropertyControlRadio in React

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/catalog/properties/radio.mdx

Illustrates how to customize the rendering of options within the PropertyControlRadio component using the 'render' prop. This example uses IconButton components to provide a visual selection for alignment options.

```jsx
import '@composify/react/style.css';
import { PropertyControlRadio } from '@composify/react/editor';
import { useState } from 'react';

export const IconButton = ({ selected, children, onChange }) => (
  <button
    style={{
      display: 'flex',
      justifyContent: 'center',
      padding: '0.5rem',
      cursor: 'pointer',
      outline: 'none',
      borderRadius: '0.25rem',
      border: `0.0265rem solid ${selected ? 'gainsboro' : 'whitesmoke'}`, 
      backgroundColor: selected ? 'gainsboro' : 'whitesmoke',
    }}
    onClick={onChange}
  >
    {children}
  </button>
);

export const WithCustomRender = () => {
  const [value, setValue] = useState('left');

  return (
    <PropertyControlRadio
      name="example"
      spec={{
        label: 'Alignment',
        type: 'radio',
        options: ['left', 'center', 'right'],
        render: (value, onChange) => (
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <IconButton selected={value === 'left'} onChange={() => onChange('left')}>
              <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 640 640">
                <path d="M384 128C384 145.7 369.7 160 352 160L128 160C110.3 160 96 145.7 96 128C96 110.3 110.3 96 128 96L352 96C369.7 96 384 110.3 384 128zM384 384C384 401.7 369.7 416 352 416L128 416C110.3 416 96 401.7 96 384C96 366.3 110.3 352 128 352L352 352C369.7 352 384 366.3 384 384zM96 256C96 238.3 110.3 224 128 224L512 224C529.7 224 544 238.3 544 256C544 273.7 529.7 288 512 288L128 288C110.3 288 96 273.7 96 256zM544 512C544 529.7 529.7 544 512 544L128 544C110.3 544 96 529.7 96 512C96 494.3 110.3 480 128 480L512 480C529.7 480 544 494.3 544 512z" />
              </svg>
            </IconButton>
            <IconButton selected={value === 'center'} onChange={() => onChange('center')}>
              <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 640 640">
                <path d="M448 128C448 110.3 433.7 96 416 96L224 96C206.3 96 192 110.3 192 128C192 145.7 206.3 160 224 160L416 160C433.7 160 448 145.7 448 128zM544 256C544 238.3 529.7 224 512 224L128 224C110.3 224 96 238.3 96 256C96 273.7 110.3 288 128 288L512 288C529.7 288 544 273.7 544 256zM96 512C96 529.7 110.3 544 128 544L512 544C529.7 544 544 529.7 544 512C544 494.3 529.7 480 512 480L128 480C110.3 480 96 494.3 96 512zM448 384C448 366.3 433.7 352 416 352L224 352C206.3 352 192 366.3 192 384C192 401.7 206.3 416 224 416L416 416C433.7 416 448 401.7 448 384z" />
              </svg>
            </IconButton>
            <IconButton selected={value === 'right'} onChange={() => onChange('right')}>
              <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 640 640">
                <path d="M544 128C544 145.7 529.7 160 512 160L288 160C270.3 160 256 145.7 256 128C256 110.3 270.3 96 288 96L512 96C529.7 96 544 110.3 544 128zM544 384C544 401.7 529.7 416 512 416L288 416C270.3 416 256 401.7 256 384C256 366.3 270.3 352 288 352L512 352C529.7 352 544 366.3 544 384zM96 256C96 238.3 110.3 224 128 224L512 224C529.7 224 544 238.3 544 256C544 273.7 529.7 288 512 288L128 288C110.3 288 96 273.7 96 256zM544 512C544 529.7 529.7 544 512 544L128 544C110.3 544 96 529.7 96 512C96 494.3 110.3 480 128 480L512 480C529.7 480 544 494.3 544 512z" />
              </svg>
            </IconButton>
          </div>
        ),
      }}
      value={value}
      onChange={(_, next) => setValue(next)}
    />
  );
};

```

--------------------------------

### Configure Routes for Page Rendering and Editor

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/react-router.md

This code snippet configures the application's routes using '@react-router/dev/routes'. It sets up an index route for the home page and dynamic routes for rendering individual pages and accessing the visual editor based on a slug.

```ts
import { type RouteConfig, index, route } from '@react-router/dev/routes';

export default [
  index('routes/home.tsx'),
  route('editor/:slug', 'routes/editor.tsx'),
  route(':slug', 'routes/page.tsx'),
] satisfies RouteConfig;
```

--------------------------------

### Register and Manage Components with Catalog API

Source: https://context7.com/composify-js/composify/llms.txt

This snippet demonstrates how to use the Catalog API to register components, retrieve them individually or all at once, validate component names, find missing components, and clear all registrations. It relies on the '@composify/react/renderer' module.

```typescript
import * as Catalog from '@composify/react/renderer';

// Register components
Catalog.register('Button', {
  component: ({ label }) => <button>{label}</button>,
  props: {
    label: { label: 'Label', type: 'text', default: 'Click me' },
  },
});

// Get single component
const buttonSpec = Catalog.get('Button');
console.log(buttonSpec?.name); // 'Button'
console.log(buttonSpec?.props); // { label: { ... } }

// Get all components with optional filter
const allComponents = Catalog.getAll();
const layoutComponents = Catalog.getAll('layout');

allComponents.forEach(({ category, blocks }) => {
  console.log(`Category: ${category}`);
  blocks.forEach(block => {
    console.log(`  - ${block.name}`);
  });
});

// Validate component names exist
const isValid = Catalog.valid(['Button', 'Text', 'VStack']);
console.log(isValid); // true or false

// Find missing components
const missing = Catalog.missing(['Button', 'NonExistent', 'Text']);
console.log(missing); // ['NonExistent']

// Clear all registrations (useful for testing)
Catalog.clear();
```

--------------------------------

### Import Composify Catalog for Page Rendering

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/expo.md

Ensures that Composify components are registered by importing the catalog at the top of the page. This is crucial for the Renderer component to correctly interpret and display the layout.

```tsx
import '@/components/catalog'; // [!code hl]

import { Renderer } from '@composify/react/renderer';
import { useLocalSearchParams } from 'expo-router';
import { useEffect, useState } from 'react';

/* ... */
```

--------------------------------

### Register Body Component in Catalog (TypeScript/React)

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/nextjs.md

Registers the 'Body' component in the Composify catalog. It defines the component's category and its properties, including size, alignment, and text content. This setup enables the visual editor to render and manage the Body component.

```tsx
/* components/catalog.tsx */
import { Catalog } from '@composify/react/renderer';
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react';

/* ... */

Catalog.register('Body', {
  component: Body,
  category: 'Content',
  props: {
    size: {
      label: 'Size',
      type: 'select',
      options: [
        { label: 'Small', value: 'sm' },
        { label: 'Medium', value: 'md' },
        { label: 'Large', value: 'lg' },
        { label: 'Extra Large', value: 'xl' },
        { label: '2XL', value: '2xl' },
      ],
      default: 'md',
    },
    align: {
      label: 'Text Align',
      type: 'radio',
      options: [
        { label: <AlignLeftIcon />, value: 'left' },
        { label: <AlignCenterIcon />, value: 'center' },
        { label: <AlignRightIcon />, value: 'right' },
      ],
      default: 'left',
    },
    children: {
      label: 'Text',
      type: 'textarea',
      default: 'Body',
    },
  },
});

/* ... */

```

--------------------------------

### Composify Editor Usage (React)

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/editor/index.mdx

Demonstrates how to use the Composify Editor component in a React application. It shows how to provide a source string containing JSX components and render them within the editor for visual editing.

```tsx
import { Editor } from "@composify/react/editor";

const source = `
  <Grid columns={1} className={['gap-24', 'md:grid-cols-2']}>
    <VStack className={['rounded-md', 'border']}>
      <VStack className={['flex-1', 'p-32', 'gap-6']}>
        <Heading level={3} size="2xl" weight="semibold">
          Drop-in Integration
        </Heading>
        <Body size="lg">
          No rewrites, no special wrappers. Just register your components, and they're instantly editable.
        </Body>
      </VStack>
      <FeaturePreview>
        <CodeSnippet language="tsx" content="dropInIntegration" />
      </FeaturePreview>
    </VStack>
    <VStack className={['rounded-md', 'border']}>
      <VStack className={['flex-1', 'p-32', 'gap-6']}>
        <Heading level={3} size="2xl" weight="semibold">
          JSX Everywhere
        </Heading>
        <Body size="lg">
          Everything is stored as human-readable JSX strings. Not JSON, not a proprietary format.
        </Body>
      </VStack>
      <FeaturePreview>
        <CodeSnippet language="tsx" content="jsxEverywhere" />
      </FeaturePreview>
    </VStack>
  </Grid>
`;

export function Example() {
  return <Editor title="Home Page" source={source} />;
}
```

--------------------------------

### Registering a Layout Component with Composify (JavaScript)

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/react-router.md

This JavaScript snippet demonstrates how to register a layout component, 'HStack', with the Composify Catalog. It specifies the component's properties like alignment, spacing, dimensions, padding, margin, and background, along with their types and default values.

```javascript
Catalog.register('HStack', {
  component: HStack,
  category: 'Layout',
  props: {
    alignHorizontal: {
      group: 'Layout',
      label: 'Align',
      type: 'radio',
      options: [
        { value: 'start', label: 'Start' },
        { value: 'center', label: 'Center' },
        { value: 'end', label: 'End' },
        { value: 'between', label: 'Between' },
        { value: 'around', label: 'Around' },
      ],
      default: 'start',
    },
    alignVertical: {
      group: 'Layout',
      label: 'Distribute',
      type: 'radio',
      options: [
        { value: 'stretch', label: 'Stretch' },
        { value: 'start', label: 'Start' },
        { value: 'center', label: 'Center' },
        { value: 'end', label: 'End' },
      ],
      default: 'stretch',
    },
    flex: {
      group: 'Layout',
      label: 'Flex',
      type: 'number',
      optional: true,
    },
    gap: {
      group: 'Layout',
      label: 'Gap',
      type: 'number',
      optional: true,
    },
    width: {
      group: 'Size',
      label: 'Width',
      type: 'number',
      default: 100,
      optional: true,
    },
    height: {
      group: 'Size',
      label: 'Height',
      type: 'number',
      default: 100,
      optional: true,
    },
    padding: {
      group: 'Layout',
      label: 'Padding',
      type: 'object',
      fields: {
        top: {
          label: 'Top',
          type: 'number',
          default: 0,
        },
        right: {
          label: 'Right',
          type: 'number',
          default: 0,
        },
        bottom: {
          label: 'Bottom',
          type: 'number',
          default: 0,
        },
        left: {
          label: 'Left',
          type: 'number',
          default: 0,
        },
      },
      optional: true,
    },
    margin: {
      group: 'Layout',
      label: 'Margin',
      type: 'object',
      fields: {
        top: {
          label: 'Top',
          type: 'number',
          default: 0,
        },
        right: {
          label: 'Right',
          type: 'number',
          default: 0,
        },
        bottom: {
          label: 'Bottom',
          type: 'number',
          default: 0,
        },
        left: {
          label: 'Left',
          type: 'number',
          default: 0,
        },
      },
      optional: true,
    },
    background: {
      label: 'Background',
      type: 'text',
      default: '#EEEEEE',
      optional: true,
    },
    children: {
      label: 'Children',
      type: 'node',
    },
  },
});
```

--------------------------------

### Register a React Component with Composify

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/blog/2025-10-26-introducing-composify.md

Demonstrates how to register a custom React component ('Text') with Composify's Catalog. This includes defining the component's structure and its editable props with type, options, and default values.

```jsx
import { Catalog } from '@composify/react/renderer';

const Text = ({ textAlign, children }) => (
  <p style={{ textAlign }}>{children}</p>
);

Catalog.register('Text', {
  component: Text,
  props: {
    textAlign: {
      type: 'radio',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
      default: 'left',
    },
    children: {
      type: 'string',
      default: 'Hello, world!',
    },
  },
});
```

--------------------------------

### Render JSX String with Composify Renderer (TypeScript/React)

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/renderer/index.mdx

Demonstrates how to use the Composify Renderer to display a JSX string as a live UI. It imports the Renderer from '@composify/react/renderer' and uses a predefined source string. The Renderer takes the source string as a prop to render the UI.

```tsx
import { Renderer } from '@composify/react/renderer';

const source = `
  <VStack className={['rounded-md', 'border']}>
    <VStack className={['flex-1', 'p-32', 'gap-6']}>
      <Heading level={3} size="2xl" weight="semibold">
        Drop-in Integration
      </Heading>
      <Body size="lg">
        No rewrites, no special wrappers. Just register your components, and they're instantly editable.
      </Body>
    </VStack>
    <FeaturePreview>
      <CodeSnippet language="tsx" content="dropInIntegration" />
    </FeaturePreview>
  </VStack>
`;

export function Example() {
  return <Renderer source={source} />;
}
```

--------------------------------

### Render Dynamic Pages with Next.js and Composify React Renderer

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/nextjs.md

This snippet demonstrates how to create a dynamic route in Next.js to render pages. It fetches page content from a local API and passes it to the Composify React Renderer. It handles cases where content is not found by returning a 404. Dependencies include '@composify/react/renderer' and 'next/navigation'.

```tsx
import '@/components/catalog';

import { Renderer } from '@composify/react/renderer';
import { notFound } from 'next/navigation';

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;

  const res = await fetch(`http://localhost:9000/documents/${slug}`, {
    cache: 'no-store',
  });
  const { content } = await res.json().catch(() => ({}));

  if (!content) {
    return notFound();
  }

  return (
    <main className="p-4">
      <section className="flex items-end justify-between mb-4">
        <h1 className="text-2xl">Rendering page {slug}</h1>
        <a href={`/editor/${slug}`} className="text-blue-500 hover:underline">
          Visit Editor
        </a>
      </section>
      <section className="border rounded-sm border-neutral-200">
        <Renderer source={content} />
      </section>
    </main>
  );
}
```

--------------------------------

### Flexbox Alignment and Justification Styles (React Native)

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/expo.md

Provides a comprehensive set of predefined styles for managing flexbox alignment and justification in React Native applications. These styles can be applied to components to control the distribution and alignment of child elements along the main and cross axes.

```javascript
const styles = StyleSheet.create({
  base: {
    flexDirection: 'row',
  },
  'justify-start': {
    justifyContent: 'flex-start',
  },
  'justify-center': {
    justifyContent: 'center',
  },
  'justify-end': {
    justifyContent: 'flex-end',
  },
  'justify-between': {
    justifyContent: 'space-between',
  },
  'justify-around': {
    justifyContent: 'space-around',
  },
  'align-start': {
    alignItems: 'flex-start',
  },
  'align-center': {
    alignItems: 'center',
  },
  'align-end': {
    alignItems: 'flex-end',
  },
  'align-stretch': {
    alignItems: 'stretch',
  },
});

```

--------------------------------

### Implement Visual Editor Page with State Management and API Integration

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/expo.md

This React component (`EditorPage`) utilizes `expo-router` for routing and `useState` and `useEffect` hooks for managing component state. It fetches initial content from a local API endpoint and handles saving updated content back to the same endpoint. The editor requires specific CSS imports and component catalog registration to function correctly.

```tsx
import '@/components/catalog';
import '@composify/react/style.css';

import { Editor } from '@composify/react/editor';
import { useLocalSearchParams } from 'expo-router';
import { useEffect, useState } from 'react';
import { Alert } from 'react-native';

export default function EditorPage() {
  const [source, setSource] = useState<string | null>(null);

  const { slug } = useLocalSearchParams<{ slug: string }>();

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch(`http://localhost:9000/documents/${slug}`, {
        cache: 'no-store',
      });
      const { content } = await res.json().catch(() => ({}));

      setSource(content ?? '<VStack size={{ height: 200 }} backgroundColor="#f8fafc" />');
    };

    fetchData();
  }, [slug]);

  const handleSubmit = async (source: string) => {
    await fetch(`http://localhost:9000/documents/${slug}`, {
      method: 'DELETE',
    }).catch(() => null);

    await fetch('http://localhost:9000/documents', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: slug,
        content: source,
      }),
    });

    Alert.alert('Saved successfully');
  };

  if (!source) {
    return null;
  }

  return <Editor title={`Editing: ${slug}`} source={source} onSubmit={handleSubmit} />;
}

```

--------------------------------

### Create Visual Editor Page

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/docs/tutorial/react-router.md

This code defines the visual editor page for creating and editing content. It fetches existing content or defaults to a basic structure, provides an onSubmit handler to save changes via API calls, and uses the '@composify/react/editor' component. It requires '@composify/react/editor' and '@composify/react/style.css'.

```tsx
import '~/components/catalog';
import '@composify/react/style.css';

import { Editor } from '@composify/react/editor';
import { type LoaderFunctionArgs, useLoaderData } from 'react-router';

export async function loader({ params }: LoaderFunctionArgs) {
  const slug = params.slug ?? '';
  const res = await fetch(`http://localhost:9000/documents/${slug}`);
  const { content } = await res.json().catch(() => ({}));

  return {
    slug,
    content: content ?? '<VStack />',
  };
}

export default function EditorPage() {
  const { slug, content } = useLoaderData<typeof loader>();

  const handleSubmit = async (value: string) => {
    await fetch(`http://localhost:9000/documents/${slug}`, {
      method: 'DELETE',
    }).catch(() => null);

    await fetch('http://localhost:9000/documents', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: slug,
        content: value,
      }),
    });

    alert('Saved!');
  };

  return <Editor title={`Editing: ${slug}`} source={content} onSubmit={handleSubmit} />;
}
```

--------------------------------

### Edit a Composify Component in React

Source: https://github.com/composify-js/composify/blob/main/packages/docs/app/pages/blog/2025-10-26-introducing-composify.md

Illustrates how to integrate the Composify editor into a React application. It imports necessary styles and the Editor component, passing the `source` and an `onSubmit` handler.

```jsx
import '@composify/react/style.css';
import { Editor } from '@composify/react/editor';

export const EditorPage = () => (
  <Editor source={source} onSubmit={console.log} />
);
```

--------------------------------

### Next.js Renderer Page Integration

Source: https://context7.com/composify-js/composify/llms.txt

This code implements a Next.js renderer page that fetches content from an API and renders it using the Composify Renderer. It imports the necessary components and sets up data fetching.

```typescript
// app/[slug]/page.tsx - Renderer page
import { Renderer } from '@composify/react/renderer';
import '@/components/catalog';

export default async function Page({ params }) {
  const { slug } = await params;

  const res = await fetch(`http://localhost:9000/documents/${slug}`, {
    cache: 'no-store',
  });
  const { content } = await res.json();

  return (
    <main className="p-4">
      <h1>Page: {slug}</h1>
      <Renderer source={content} />
    </main>
  );
}
```