-
-
main
-
idea
-
editor
-
scene
-
storyboard
-
audio
-
chat
-
profile
-
settings
Problem
Storytelling today is scattered across too many tools. Writers and creators often jump between apps to write scripts, visualize scenes, generate audio, translate content, and revise narration. This constant switching breaks focus and slows progress, especially for creators who want to work quickly on mobile.
While AI has made powerful creative tools possible, many of them come with setup friction or technical barriers. Mobile creators are often left out, since most creative platforms are designed primarily for desktop use and complex workflows.
Solution
Scriptly reimagines how creators build on mobile.
Scriptly is a mobile-first, AI-powered creative studio that brings scripts, storyboards, visual rendering, audiobooks, dubbing, and AI collaboration into one connected experience. As ideas evolve, Scriptly evolves with them.
From a single idea or script, creators can generate storyboards, produce high-quality audiobooks, dub content into multiple languages, apply expressive AI voices, and refine scenes, pacing, and narration using AI assistance.
Scriptly helps creators start with a core idea, generate structured scripts using AI, split the script into scenes, visualize those scenes, produce audiobook narration with expressive voices, translate and dub audio into multiple languages, and refine pacing and narration with AI assistance. Storyboards can be exported as PDF or saved into your project library for future access and sharing.
Scriptly uses a bring-your-own-key approach at the moment, integrating with industry-standard AI services including Gemini, OpenAI, and ElevenLabs for text generation, chat assistance, and voice synthesis. In the future, the plan is to add a subscription experience to remove setup friction and make Scriptly accessible to creators without technical setup.
How Scriptly Was Built
Scriptly was built using Flutter for the mobile frontend and Serverpod as the backend engine.
Frontend (Flutter)
The Flutter app implements a responsive, intuitive UI that walks users through the creative pipeline step by step. It uses:
GoRouter for declarative navigation between screens
Provider for state management
Material 3 design system for consistent styling
The app is organized into modular screens, each corresponding to a key creative task:
Screens and Interfaces
Home and Project Dashboard – Lists existing projects, shows workflow steps, and allows creation of new projects.
Idea Input and Script Generator – Allows prompt entry and AI script creation. Scene Manager – Displays scenes generated from scripts, supports reordering and edits. Storyboard View – Shows visual illustrations or placeholders for each scene. Audio & Voice Page – Lets users select voices, generate audio, and play or review narration. Chat Assistant (Whisper) – Real-time AI chat interface for rewriting, brainstorming, and creative feedback. Profile and Settings – User preferences and account details.
The app communicates with the backend through a central Serverpod service layer, where each UI action triggers API calls to Serverpod endpoints.
Backend (Serverpod)
Serverpod is a Dart-based backend framework that manages data persistence, business logic, and integration with AI services. Serverpod lets us define backend logic in Dart and automatically generates client methods that are called directly from the Flutter app, making frontend–backend communication simple and type-safe.
Backend Interfaces Scriptly’s Serverpod backend exposes multiple API endpoints that encapsulate core operations: ProjectEndpoint – Create, read, update, and delete storytelling projects ScriptEndpoint – Generate and manage script versions, handle AI text generation SceneEndpoint – Split scripts into scenes, reorder and update scene metadata StoryboardEndpoint – Request storyboard visual generation and return image references AudioEndpoint – Trigger AI voice synthesis for narration and dubbed audio ChatEndpoint – Handle AI chat messages and context history
Each endpoint receives requests from the Flutter client and runs business logic like calling OpenAI or ElevenLabs APIs, saving results into a PostgreSQL database, and returning structured responses.
The backend uses Serverpod’s ORM for database interactions and supports migrations to evolve models as features grow.
Technical Workflows
Data Flow
Frontend UI triggers a user action (for example, “Generate Script”). The Flutter app calls a Serverpod endpoint through generated client methods. Serverpod processes the request with backend logic and calls external AI APIs. Results are stored in a PostgreSQL database and returned to the client. The UI updates to show new content or results. This cycle allows Scriptly to stay responsive and to keep project state synchronized across devices.
....
Scriptly shows how Flutter and Serverpod together can deliver a complete creative experience on mobile. Instead of fragmenting creative tasks across tools, it brings them together in one native app with seamless backend support. This project highlights how to build a full-stack Dart app that manages complex workflows, integrates with multiple AI services, and still feels intuitive for end users.
Log in or sign up for Devpost to join the conversation.