HTML Export

#game_design #coding #vibe-coding #docs #dynamic_stories

HTML Export

Export your interactive story as a self-contained HTML file that works anywhere - no server required.

What is HTML Export?

HTML export creates a standalone web version of your interactive story as a single index.html file (plus asset folders). This file contains your entire story: the runtime engine, all story scripts, dialogue, logic, variables, and images - everything needed to play your story in any modern web browser without requiring a server.

What's Included in HTML Export:

  • Complete Runtime Engine: The JavaScript runtime that interprets your story nodes and handles gameplay
  • All Story Scripts: Every .sfe file embedded as JSON data
  • Global Variables: Initial values for all global variables
  • Images: All image assets (JPG, JPEG, PNG) in preserved folder structure
  • Styling: Dark theme UI with responsive dialogue display
  • Startup Configuration: Automatically loads your designated startup script

Perfect For

  • Easily sharing your interactive stories with anyone
  • Publishing on itch.io or hosting on your own website
  • Sharing via email, Dropbox, Google Drive, or other cloud storage
  • Playing offline (works without internet after download)
  • Distributing demos and prototypes
  • Game jams and rapid prototyping

Export Output

HTML export creates a build/ folder in your project directory containing:

build/
├── index.html           (Your interactive story)
└── assets/             (Images with folder structure)
    ├── backgrounds/
    └── characters/

How to Export

Exporting your story as HTML is quick and straightforward. The editor automatically saves all your work and packages everything into a shareable interactive story.

Export Steps:

  1. Open your project in StoryFlow Editor
  2. Ensure you've set a Startup Script via the menu next to the Play button (required for export)
  3. Click the Export button in the top-right corner of the editor (amber download icon)
  4. In the dropdown menu, select HTML as the export format
  5. Click "Export Project"
  6. The editor automatically saves all changed files before exporting
  7. A notification appears showing export progress
  8. When complete, click "Show in Folder" to open the build/ directory

Export dropdown menu showing HTML and JSON format options with Export Project button

Testing Your Export:

  1. Navigate to YourProject/build/index.html
  2. Double-click index.html to open it in your default web browser
  3. Your story should start playing from the startup script
  4. Test all dialogue options, branches, and variable interactions
  5. Verify that images load correctly

Sharing Your Story

Once you've exported and tested your HTML story, you can share it with the world. HTML exports work on any platform with a web browser, making distribution incredibly flexible.

itch.io is a popular free platform for indie creators to share interactive stories and browser-based content. Upload your build/ folder as a ZIP file, set the project type to "HTML", and mark it to be played in the browser.

Hosting on Your Own Website

You can host your HTML export on any web server or static hosting platform.

GitHub Pages (Free):

  1. Create a GitHub repository for your story
  2. Upload the contents of the build/ folder to the repository
  3. Go to repository Settings → Pages
  4. Enable GitHub Pages from the main branch
  5. Your story will be available at https://username.github.io/repository-name/

Other Hosting Options:

  • Netlify: Drag-and-drop deployment, free tier available
  • Vercel: Fast hosting with automatic HTTPS, free for personal projects
  • Your Web Server: Upload via FTP to any hosting provider
  • GameJolt: Interactive content distribution platform similar to itch.io

Sharing Directly

For quick sharing without hosting, you can distribute the HTML file directly:

  • Email: Zip the build/ folder and send as attachment (if under email size limits)
  • Cloud Storage: Upload to Google Drive, Dropbox, or OneDrive and share the link
  • USB Drive: Copy the build/ folder for offline demos

Note: Browser Security

When opening index.html directly from the file system (file:// protocol), some browsers may block asset loading due to CORS restrictions. For best results, always test using a local web server or host on a platform like itch.io or GitHub Pages.

Customization Options

Currently, HTML exports use a default dark theme styled for readability and compatibility. The runtime provides a clean, minimal interface that works well for most interactive fiction and visual novels.

What's Included in the Default Theme:

  • Dark Background: Easy on the eyes for extended reading
  • Readable Typography: Clear fonts optimized for dialogue text
  • Responsive Buttons: Touch-friendly option buttons with hover effects
  • Image Support: Displays background images from Dialogue nodes
  • Mobile Friendly: Adapts to different screen sizes automatically

Future Customization

Visual UI customization features (themes, fonts, colors, layouts) are planned for future updates. For now, the default theme ensures broad compatibility and professional appearance across all browsers and devices.

Technical Details:

  • Supported Image Formats: JPG, JPEG, PNG
  • Browser Compatibility: All modern browsers (Chrome, Firefox, Safari, Edge)
  • Responsive Design: Works on desktop, tablet, and mobile
  • No Server Required: Pure client-side JavaScript execution

Next Steps

Learn about JSON Export for integrating your stories with game engines like Unity, Godot, or custom applications. JSON export maintains your story structure in a portable, engine-agnostic format.

→ JSON Export→ Play in Editor→ Variables→ Quick Start

← Previous: Runtime Debugger

Next: JSON Export →