🎬 KinoScripter

A powerful, interactive screenplay editor for filmmakers and storytellers.

🚀 Overview

KinoScripter is a modern, browser-based screenplay editor designed specifically for visual storytelling. Unlike traditional screenwriting tools that focus only on dialogue and action, KinoScripter embraces the dual-column format that separates audio and visual elements, making it perfect for:

• Documentary filmmakers
• Video essayists
• Commercial directors
• Content creators
• Storyboard artists
• Anyone who thinks visually while writing

✨ Features

• Dual-Column Layout: Separate what viewers will hear (left) from what they'll see (right)
• Hierarchical Structure: Organize your story with acts, scenes, and beats
• Rich Text Editing: Powered by Tiptap, a flexible editor framework for the web
• Cloud Storage: Scripts automatically saved to your account
• Customizable Workflow: Collapsible sections to focus on what matters
• Film-Inspired UI: Cinematic design with subtle film grain texture
• Dedicated Script Header: Easily edit title and description separate from content
• Responsive Design: Works well on various screen sizes
• Public Sharing: Make scripts public and share read-only links with others
• Consistent URLs: Direct links to each script for easy navigation and bookmarking
• Read-Only Mode: View scripts without the ability to edit them
• PDF Export: Download your script as a PDF document with proper formatting
• Resource Chips: Add links, tags, and media attachments to enrich your script with references and resources

🎭 Document Structure

KinoScripter uses a hierarchical document structure that mirrors the filmmaking process:

Story
  ├── Title Header (Script metadata)
  ├── Resources (Links, tags, and media attachments)
  └── Act
       └── Scene
            └── Beat
                 └── Dual Column
                      ├── Audio Column
                      │    └── Paragraph
                      └── Visual Column
                           └── Paragraph

This structure allows you to:

• Group related scenes into acts
• Break scenes into distinct beats
• Separate what the audience hears from what they see
• Maintain a clean, organized screenplay
• Keep script metadata (title/description) separate from content

🛠️ Technical Details

KinoScripter is built with modern web technologies:

• SvelteKit: Fast, reactive UI framework
• Tiptap: Extensible rich text editor
• Supabase: Backend database and authentication
  • Storage Buckets: Secure media file storage and management
• TypeScript: Type-safe coding for reliability
• Tailwind CSS: Utility-first styling for consistent design
• Sonner: Elegant toast notifications
• Puppeteer: Headless browser for PDF generation

The editor uses a custom document schema with specialized nodes for screenplay elements, allowing for a structured yet flexible writing experience.

📝 Using KinoScripter

Creating a New Script

1. Visit the KinoScripter page
2. A new script will be automatically created if you don't have any
3. Or select an existing script from the header dropdown
4. Edit the title and description in the script header
5. Start writing in the audio and visual columns

URL Structure

• All scripts are accessible via a consistent URL pattern: /spells/kinoscripter/cast/[script-id]
• This makes it easy to bookmark specific scripts and share them with others
• When visiting /spells/kinoscripter, you'll automatically be redirected to your most recent script

Sharing Scripts

1. Click the "Eye" icon in the script header to view the script in read-only mode
2. Use the "Copy Link" option to share the script URL
3. Toggle the "Public/Private" switch to control access:
   • Public: Anyone with the link can view the script (read-only)
   • Private: Only you can access the script

Managing Resources

1. Find the Resources section at the top of your script
2. Add different types of resources to enrich your screenplay:
   • Links: Add reference URLs with custom titles for research materials, inspiration, or sources
   • Tags: Create categorization tags to organize and filter your scripts
   • Media: Upload and attach images, audio clips, or videos directly to your script
3. Hover over any resource chip to see more details or options
4. Use the resource chips as reference materials while writing
5. All attached media is securely stored in your account's storage bucket

Script Organization

• Title Header: Contains script metadata visual indicator
• Script Header: Edit title and description separate from content
• Resources Section: Add and manage reference links, tags, and media files
• Acts: Major divisions of your story (similar to chapters)
• Scenes: Distinct locations or time periods
• Beats: Individual moments or ideas within a scene
• Dual Column: Split view showing audio and visual elements side-by-side

Writing Tips

• Audio Column: Write dialogue, narration, music cues, and sound effects
• Visual Column: Describe shots, action, graphics, and visual elements
• Collapsible Headers: Click to expand/collapse sections as you work
• Auto-Save: Your work is automatically saved as you type
• Script Metadata: Edit title and description in the dedicated header area

Exporting Scripts as PDF

1. Open the script you want to export
2. Click the "Download PDF" button in the script header
3. A properly formatted PDF will be generated that preserves:
   • Your dual-column layout
   • Hierarchical structure (Acts, Scenes, Beats)
   • All text formatting and content
4. The PDF will be downloaded to your device with the script title as the filename

🧩 Custom Extensions

KinoScripter extends the base editor with specialized nodes and commands:

• Story Node: The root container for your screenplay
• Title Header Node: Visual indicator for the start of content
• Act Node: Major sections of your story
• Scene Node: Individual sequences in specific locations
• Beat Node: Smaller units within scenes
• Dual Column Node: Split-view container for audio and visual content
• Custom Paragraph: Enhanced paragraphs with placeholder support

🏗️ Code Architecture

KinoScripter follows a modular architecture for better organization and maintainability:

src/spells/kinoscripter/
├── components/           # UI components
│   └── custom-nodes/     # Svelte components for Tiptap nodes
├── extensions/           # Tiptap extensions
├── stores/               # State management
│   └── kinoStore.ts      # Centralized store for KinoScripter context
├── utils/                # Utility functions
│   ├── scriptUtils.ts    # Script content processing utilities
│   └── supabaseHelpers.ts # Database operation helpers
├── styles/               # CSS styles
├── +page.svelte          # Main page component
├── +page.server.ts       # Server-side logic
└── +layout.svelte        # Layout wrapper

This modular organization:

• Groups related functionality together
• Makes the codebase easier to navigate
• Centralizes state management in dedicated stores
• Separates UI components from business logic
• Consolidates reusable utility functions

🔒 Data Storage

Your scripts are securely stored in your account:

• Automatic saving in the background
• Separate storage of script metadata (title/description) and content
• Media files stored in dedicated Supabase storage buckets with proper access controls
• Control over public/private visibility of scripts
• Full version history (coming soon)
• Export options (coming soon)

🔮 Future Enhancements

• Collaboration features
• Mobile-friendly interface
• AI-assisted writing tools
• Advanced formatting options
• Integration with production tools
• Improved version history

🔧 Setup

KinoScripter requires user authentication. Make sure you're logged in to access and save your scripts.

💡 Inspiration

KinoScripter is inspired by:

• Two-column AV scripts used in documentary filmmaking
• Storyboard formats from animation and commercial production
• Film school screenplay formatting
• Visual thinking approaches to storytelling
• Modern web-based document editors

🚀 Get Started

Sign in and start writing your next visual masterpiece with KinoScripter!