DOCUMENTATION

GETTING STARTED

Installation

Get Embed Blocks running in your project in seconds.

npm install @embed-blocks/core
# or
yarn add @embed-blocks/core

Basic Setup

Initialize the client in your application:

import { EmbedBlocks } from '@embed-blocks/core';

const blocks = new EmbedBlocks({
  apiKey: process.env.NEXT_PUBLIC_EMBED_KEY,
  baseUrl: 'https://api.example.com',
});

export default blocks;

Your First Block

Embed a component in your page:

import blocks from '@/lib/blocks';

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <blocks.Embed
        id="my-first-block"
        onLoad={(block) => console.log('Loaded', block)}
      />
    </div>
  );
}

API REFERENCE

<Embed> Component

Core component for embedding blocks into your application.

Props

id (string, required)

Unique block identifier

data (object, optional)

Initial data to pass to block

onLoad (function, optional)

Called when block is ready

onError (function, optional)

Called if block fails to load

className (string, optional)

Custom CSS classes

Methods

blocks.create(config)

Create a new block definition.

const myBlock = blocks.create({
  id: 'my-block',
  render: (props) => <Component {...props} />,
  schema: { /* validation */ }
});

blocks.register(id, definition)

blocks.register('hero', HeroBlockComponent);

EXAMPLES

Hero Block

<Embed
  id="hero-section"
  data={{
    title: 'Welcome',
    subtitle: 'Build amazing experiences',
    cta: { text: 'Learn More', href: '/docs' }
  }}
  onLoad={(block) => {
    console.log('Hero loaded');
  }}
/>

Data Updates

const embedRef = useRef();

const updateData = () => {
  embedRef.current?.updateData({
    status: 'loading'
  });
};

<Embed ref={embedRef} id="dynamic-block" />

Event Handling

<Embed
  id="interactive-block"
  onLoad={(block) => {
    block.on('action', (event) => {
      console.log('Action:', event.type);
    });
  }}
/>

FAQ

How do I create custom blocks?

Blocks are React components wrapped with the Embed Blocks API. Define your component, register it using blocks.register(), and embed it anywhere.

Can I use TypeScript?

Yes. Full TypeScript support with type definitions included. Define interfaces for your block props and data.

What about styling?

Bring your own CSS. We don't enforce styles. Use Tailwind, CSS Modules, Styled Components—whatever works for you.

Is there a production build?

Yes. Use blocks.build() to generate optimized bundles for production. Includes minification and code splitting.

How do I handle errors?

Pass an onError callback to Embed. Errors are reported with full stack traces in development, sanitized in production.

Can blocks communicate with each other?

Use the event system. Blocks can emit events that other blocks listen to. Full pub/sub capability.

READY TO BUILD?

Start with the free tier. No credit card required.

BACK TO HOME