Developer SDK Documentation

Integrate the visual template builder into your app

The @charisol/plexo-sdk npm package lets you embed the drag-and-drop builder directly in your React pages, compile templates to production-ready HTML, and configure AI provider routing.

1. Installation

# Install the Plexo SDK package
npm install @charisol/plexo-sdk

2. Embed the Visual Builder

Place the <PlexoBuilder /> component inside any React component page to give your users a premium visual editing workspace. Pass an API key to load their subscription tier settings automatically.

import React, { useRef } from 'react';
import { PlexoBuilder, type PlexoBuilderRef } from '@charisol/plexo-sdk';

export default function TemplateEditor() {
  const builderRef = useRef<PlexoBuilderRef>(null);

  const handleSave = async () => {
    if (builderRef.current) {
      // Export design as JSON and compiled responsive HTML
      const { json, html } = await builderRef.current.exportDesign('email');
      
      // Save data to your database
      await fetch('/api/save', {
        method: 'POST',
        body: JSON.stringify({ json, html }),
      });
    }
  };

  return (
    <div style={{ height: '80vh' }}>
      <PlexoBuilder
        ref={builderRef}
        apiKey="YOUR_PLEXO_API_KEY"
        mode="email" // or 'landing_page'
        themeBgColor="var(--brand)"
        textColor="#ffffff"
        useAi={true} // Enable AI copilot support
      />
      <button onClick={handleSave}>Save Canvas</button>
    </div>
  );
}

3. Compile to HTML / Plain Text on Backend

Plexo templates can be compiled on server environments (Node.js, Next.js API, Server Actions) directly to clean HTML or plain text using lightweight compiler functions without rendering the React builder viewport.

import { compileToHTML, compileToPlainText } from '@charisol/plexo-sdk';

// Fetch the saved JSON design configuration from your database
const templateJson = await db.templates.findUnique({ where: { id: '...' } });

// Compile to production-ready, cross-client HTML
const responsiveHtml = compileToHTML(templateJson.designJson);

// Compile to plain text backup for email clients
const plainText = compileToPlainText(templateJson.designJson);

SDK Capabilities

Embeddable visual editor component with complete control layers

Lightweight compilation of templates directly to responsive HTML

Automatic injected support for Strata Design tokens

AI assistant route integration with support for multiple providers

Fully custom upload handlers for media uploads in the workspace

Full TypeScript typing interfaces for all JSON models

Ready to integrate Plexo?

Create an account to get a developer API key, setup custom AI creativity parameters, and embed the canvas.

Create Developer Account Explore Platform