React Template Preview SDK

A comprehensive SDK for previewing React-based templates with hot reload, file navigation, configurable options, and dark theme support.

Features

✨ Hot Reload - Automatically reloads templates when files change
📁 File Navigation - Tree view with folders and files
🎨 Dark Theme - Beautiful dark mode with theme toggle
⚙️ Configurable Preview - Adjust paper size, orientation, and margins
📝 Smart Variables - Auto-generated form inputs based on component props
👁️ Code/Preview Toggle - Switch between code view and live preview
🔍 Monaco Editor - Syntax-highlighted code viewing
🪟 Open in New Tab - Preview templates in a separate window

Installation

bun add -D react-pdf-template-preview

Usage

Start the Development Server

bunx react-pdf-template-preview dev --dir ./path/to/templates

Options

• --dir, -d <path> - Path to templates directory (default: ./templates)
• --port, -p <number> - Port to run the server on (default: 3000)

Example

bunx react-pdf-template-preview dev --dir ./examples/templates --port 4000

Template Structure

Templates should be React components with TypeScript prop types:

import React from 'react';

interface WelcomeProps {
  name: string;
  title: string;
  message: string;
}

export default function Welcome({ name, title, message }: WelcomeProps) {
  return (
    <div className="p-8">
      <h1 className="text-4xl font-bold">Welcome, {name}!</h1>
      <h2 className="text-xl">{title}</h2>
      <p>{message}</p>
    </div>
  );
}

The SDK will automatically:

1. Scan your templates directory
2. Extract prop types from your components
3. Generate appropriate form inputs (text, number, boolean, date, etc.)
4. Provide live preview with Tailwind CSS support

Supported Prop Types

• string → Text input
• number → Number input
• boolean → Checkbox
• Date → Date picker
• string[] / Array<T> → Array editor
• Union types ("a" | "b") → Select dropdown

UI Features

Navigation Panel (Left)

• Collapsible file tree
• Folder/file icons with expand/collapse
• Click to select and preview

Main Canvas (Center)

• Toggle between Preview and Code views
• Monaco Editor with syntax highlighting
• Responsive preview with paper dimensions

Configuration Sidebar (Right)

• Paper Options: Size (A4, Letter, Legal, Custom), Orientation, Margins
• Variables: Auto-generated inputs based on component props
• Open in New Tab: Preview with current settings

Header

• Theme toggle (Light/Dark mode)
• Persists preference to localStorage

Development

# Install dependencies
bun install

# Run in development mode
bun run dev

# Build for production
bun run build

Publishing

# Build the package
bun run build

# Publish to npm
npm publish

License

MIT