Composify Cloud Tutorial

This guide will help you integrate the Composify Cloud editor and renderer into your existing project.

Install Composify

Add Composify to your project with your preferred package manager:

npm install @composify/react --save

Register your components

You can use plain HTML elements, but Composify really shines when you use your own components.

To make them available inside Composify, register them as described in the component registration guide.

For example, see our components index file and how it's imported in the page component.

Render a page

With our components registered, let's render a page. The Renderer takes the saved JSX and renders it using your components.

/* app/pages/[slug]/page.tsx */
import '@/components';
 
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 url = `https://pages.composify.net/[org public id]/${slug}`;
  const res = await fetch(url, {
    cache: 'no-store',
  });
 
  const { content } = await res.json().catch(() => ({}));
 
  if (!content) {
    return notFound();
  }
 
  return (
    <Renderer source={content} />
  );
}

Set up the Editor

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

/* app/pages/composify-editor.tsx */
'use client';
 
import '@composify/react/style.css';
import '@/components';
 
import { CloudEditor } from '@composify/react/editor';
 
export default function Page() {
  return <CloudEditor />;
}

Wrap up

That's it! 🎉

1. Go to your organization settings in Composify Cloud.
2. Enter the editor URL you just set up.
3. Start editing visually, and watch your changes sync into your app.