Skip to main content

React Quickstart Guide

Get up and running with BlockSlides in your React application in just a few steps.

Installation​

First, install the required packages:

pnpm add @blockslides/react @blockslides/core @blockslides/pm @blockslides/extension-kit

Or with npm:

npm install @blockslides/react @blockslides/core @blockslides/pm @blockslides/extension-kit

Create the Editor Hook​

Create a custom hook to configure your slide editor:

"use client";

import { useEditor } from "@blockslides/react";
import { ExtensionKit } from "@blockslides/extension-kit";
import type { AnyExtension, Editor } from "@blockslides/core";

declare global {
  interface Window {
    editor: Editor | null;
  }
}

type UseSlideEditorProps = {
  onUpdate?: (content: string) => void;
  content?: string | object;
  extensions?: AnyExtension[];
};

export type { UseSlideEditorProps };

export const useSlideEditor = ({
  content,
  onUpdate,
}: UseSlideEditorProps = {}) => {
  const handleUpdate = onUpdate ?? (() => {});

  const editor = useEditor(
    {
      immediatelyRender: false,
      shouldRerenderOnTransaction: false,
      content,
      theme: "dark",
      onUpdate: (ctx: { editor: Editor }) => {
        // Add optional debounce to update
        handleUpdate(JSON.stringify(ctx.editor.getJSON()));
      },
      extensions: [ExtensionKit.configure({})],
      editorProps: {
        attributes: {
          autocomplete: "off",
          autocorrect: "off",
          autocapitalize: "off",
          class: "min-h-full min-w-full",
        },
      },
    },
    []
  );

  // Expose editor instance globally for debugging
  if (typeof window !== "undefined") {
    window.editor = editor;
  }

  return { editor };
};

Create the Editor Component​

Now create your slide editor component:

import { EditorContent } from '@blockslides/react'
import { useSlideEditor } from '@/components/SlideEditor/hooks/useSlideEditor'

export const SlideEditor = ({
  content,
  onUpdate,
}: {
  onUpdate?: (content: string) => void
  content?: string | undefined | object
}) => {
  const { editor } = useSlideEditor({ onUpdate, content })

  if (!editor) {
    return null
  }

  return (
    <div className='p-8'>
      <EditorContent editor={editor} />
    </div>
  )
}

Use the Editor​

Import and use your editor in your application:

'use client'

import dynamic from 'next/dynamic'
import { useMemo } from 'react'

import { content } from '@/examples/content'

const Home = () => {
  const SlideEditor = useMemo(
    () =>
      dynamic(
        () =>
          import('@/components/SlideEditor').then(
            (mod) => mod.SlideEditor
          ),
        {
          ssr: false,
        }
      ),
    []
  )

  return (
    <div>
      <SlideEditor content={content} />
    </div>
  )
}

export default Home

Sample Content​

Here's a basic content structure to get you started. See the Schema Overview for more details:

export const content = {
  type: 'doc',
  content: [
    {
      type: 'slide',
      attrs: { id: 'title-slide' },
      content: [
        {
          type: 'row',
          attrs: { layout: '1' },
          content: [
            {
              type: 'column',
              attrs: {
                className: 'min-h-full flex text-white items-center justify-center bg-[radial-gradient(circle_at_top_left,_#0f172a,_#0b2842_45%,_#03677c_85%)]',
              },
              content: [
                {
                  type: 'heading',
                  attrs: { level: 2 },
                  content: [{ type: 'text', text: 'My First Presentation' }],
                },
                {
                  type: 'paragraph',
                  content: [
                    { type: 'text', text: 'Built with BlockSlides' },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  ],
}

Next Steps​

Now that you have a basic editor set up, explore: