Boards is a professional storyboarding tool that transforms scripts and story ideas into visual storyboards using Google's Gemini AI. Built for filmmakers, content creators, and visual storytellers, it automates scene breakdown, character identification, and frame generation—allowing you to focus on your creative vision rather than manual sketching.
The application leverages Large Language Models to extract visual structure from cinematic text, generating technical shot lists, tracking recurring characters, and producing AI-assisted visual frames for every narrative moment.
- 🎬 Smart Script Parsing - Supports PDF, DOCX, TXT, and Fountain screenplay formats
- 🤖 AI-Driven Visualization - Powered by Google Gemini 2.0/2.5 Flash models
- 📊 Professional Exports - Production-ready PDFs, shot lists, and industry-standard formats
- 🎨 Modern Interface - Dark-themed UI built with React, TypeScript, and Tailwind CSS
- Intelligent Scene Breakdown: Automatically parses screenplays into logical scenes and shots with precise timing and descriptions
- Character Tracking: Identifies and maintains consistency of key characters throughout your project
- AI Frame Generation: Creates high-quality visual drafts for every shot using Gemini Vision models
- Real-time Preview: Interactive storyboard editor with drag-and-drop reordering
Boards supports multiple production-ready export formats:
| Format | Description |
|---|---|
| PDF Layouts | Vertical, Horizontal, and Large Image layouts with customizable branding |
| Shot Lists | Detailed technical data exported to Excel (.xlsx) and PDF |
| Frame Archives | Bulk export of raw PNG frames in ZIP format |
| Screenplay PDF | Properly formatted Fountain screenplay documents |
| EDL (XML) | Industry-standard Edit Decision Lists for post-production |
Before you begin, ensure you have the following installed:
- Node.js 18.0 or higher (Download)
- npm or yarn package manager
- Google Gemini API Key (Get one here)
-
Clone the repository
git clone https://github.com/thesohamdatta/Boards.git cd Boards -
Install dependencies
Using npm:
npm install
Or using yarn:
yarn install
-
Configure environment variables
Create a
.envfile in the project root:VITE_GEMINI_API_KEY=your_gemini_api_key_here
Security Note: Never commit your
.envfile to version control. It's already included in.gitignore. -
Start the development server
npm run dev
The application will be available at
http://localhost:5173
npm run buildPreview the production build:
npm run preview- Import Your Script: Upload a screenplay file (PDF, DOCX, TXT, or Fountain format)
- AI Processing: Boards automatically breaks down scenes, identifies characters, and generates shot descriptions
- Generate Frames: Review and regenerate AI-generated visual frames as needed
- Export: Choose from multiple export formats for your production workflow
- PDF: Standard screenplay PDFs
- DOCX: Microsoft Word documents
- TXT: Plain text screenplays
- Fountain: Industry-standard plain text markup for screenplays
Boards/
├── src/
│ ├── components/ # Reusable UI components (Radix + Tailwind)
│ │ ├── ui/ # Base UI primitives
│ │ └── ... # Feature-specific components
│ ├── lib/ # Core business logic
│ │ ├── ai/ # Gemini AI orchestration
│ │ ├── parsers/ # Script parsing utilities
│ │ └── exporters/ # Export format generators
│ ├── stores/ # Zustand state management
│ ├── types/ # TypeScript type definitions
│ └── App.tsx # Main application component
├── public/ # Static assets
├── .env # Environment variables (create this)
└── package.json # Project dependencies
- React 18 - Modern UI library with hooks
- TypeScript - Type-safe development
- Vite - Next-generation frontend tooling
- Tailwind CSS - Utility-first CSS framework
- Radix UI - Unstyled, accessible component primitives
- Lucide React - Beautiful icon library
- Google Gemini API - 2.0/2.5 Flash models for vision and text generation
- PDF-Lib - Client-side PDF generation
- ExcelJS - Excel file generation
- Zustand - Lightweight state management with persistence middleware
Contributions are what make the open source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow the existing code style and TypeScript conventions
- Add tests for new features when applicable
- Update documentation for significant changes
- Ensure all existing tests pass before submitting PR
If you encounter any bugs or have feature requests, please open an issue with:
- Clear description of the problem
- Steps to reproduce
- Expected vs actual behavior
- Screenshots (if applicable)
This project is licensed under the MIT License - see the LICENSE file for details.
Soham Datta
- GitHub: @thesohamdatta
- Project Link: https://github.com/thesohamdatta/Boards
- Google Gemini for powering the AI capabilities
- Radix UI for accessible component primitives
- Tailwind CSS for the styling system
- The open source community for inspiration and tools
This project is under active development. Check the Issues page for planned features and known bugs.
If you find this project useful, please consider giving it a ⭐️!
Made with ❤️ by the Boards team