Composify Cloud

This guide walks you through integrating Composify Cloud into your project. Unlike the other tutorials, you don't need to set up your own backend. Composify Cloud handles storage, version history, and collaboration for you.

1. Install Composify

Install Composify using your preferred package manager:

npm install @composify/react --save

2. Register Your Components

You can use plain HTML elements, but Composify works best with your own components. Register them using the Catalog API.

If you haven't set up components yet, check out the framework-specific tutorials for detailed examples:

• Next.js Tutorial
• React Router Tutorial
• Expo Tutorial

3. Render Pages

With your components registered, use the Renderer to display content fetched from Composify Cloud.

/* 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} />;
}

Replace [your-org-id] with your organization's public ID from Composify Cloud.

4. Set Up the Editor

Now for the fun part: setting up the visual editor. Use the CloudEditor component to create and edit content directly in Composify Cloud.

/* 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 />;
}

A couple things to note:

• @composify/react/style.css is required. It contains the editor's core styles.
• The catalog import ensures your components are available in the editor.

5. Connect to Composify Cloud

1. Go to your organization settings in Composify Cloud.
2. Enter the editor URL you just set up (e.g., https://your-app.com/composify-editor).
3. Start editing visually, and watch your changes sync into your app.

Wrapping Up

That's it! You now have:

• A renderer that fetches and displays content from Composify Cloud
• A visual editor connected to Composify Cloud for real-time editing
• No backend to maintain: storage, versioning, and collaboration are handled for you