Developer SDK Documentation

Embed the Visual Builder into Any React SaaS

The @charisol/plexo-sdk npm package renders a pure client-side visual drag-and-drop workspace with AI generation, stock image search, and clean responsive HTML compilation.

1. Installation & Peer Dependencies

npm install @charisol/plexo-sdk react react-dom

2. Render Component (<PlexoBuilder />)

Pass your Plexo API key to load account settings and AI credit permissions automatically.

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

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

  const handleSave = async () => {
    if (builderRef.current) {
      // Export raw JSON and compiled HTML for email or landing_page
      const { json, html } = await builderRef.current.exportDesign('landing_page');
      
      await fetch('/api/save-template', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ json, html }),
      });
    }
  };

  return (
    <div style={{ height: '100vh' }}>
      <PlexoBuilder
        ref={builderRef}
        apiKey="pk_live_your_api_key"
        mode="landing_page"
        useAi={true}
        aiTier="AUTO"
        themeBgColor="#8b5cf6"
      />
    </div>
  );
}

3. Next.js App Router Integration (SSR Disabled)

Because the visual builder uses drag-and-drop and browser APIs, wrap the import with next/dynamic and set ssr: false.

// components/template-editor.tsx
'use client';

import dynamic from 'next/dynamic';
import type { PlexoBuilderRef } from '@charisol/plexo-sdk';
import '@charisol/plexo-sdk/dist/plexo-sdk.css';

const PlexoBuilder = dynamic(
  () => import('@charisol/plexo-sdk').then((m) => ({ default: m.PlexoBuilder })),
  { ssr: false, loading: () => <p>Loading Plexo Visual Editor…</p> }
);

export function TemplateEditorWrapper() {
  return <PlexoBuilder apiKey="pk_live_your_key" mode="email" useAi={true} />;
}

4. Component Props Reference

Prop	Type	Default	Description
mode	'email' \| 'landing_page'	Required	Output mode for element rules & compiler HTML
apiKey	string	Required	Your Plexo API Key for server-side AI authentication
useAi	boolean	false	Enables layout prompt bar & element-level AI prompt popup
aiTier	'AUTO' \| 'BASIC' \| 'MEDIUM' \| 'HIGH'	'AUTO'	Model complexity request tier; AUTO classifies per prompt
themeBgColor	string	'#8b5cf6'	Primary brand accent color for active elements & selection bounds
unsplashKey	string	—	Optional Unsplash key for stock image search modal

Get Your Plexo API Key