HTML Export

Export your ASCII animations as self-contained HTML files that play directly in any web browser without dependencies.

Overview

HTML export creates a single .html file containing:

All animation frames embedded as data
Rendering logic in JavaScript
CSS styling for appearance
Playback controls (optional)

Info

The exported HTML file is completely self-contained. Just open it in a browser - no server or internet connection needed.

Accessing HTML Export

Click Export in the toolbar

Select HTML from the format dropdown

Configure settings

Click Export to download

HTML Settings

Include Metadata

Embeds project information in HTML meta tags:

Project name
Creation date
App version
Author info

Animation Speed

Control playback speed multiplier:

Speed	Effect
0.25x	Quarter speed (slow motion)
0.5x	Half speed
1.0x	Original speed
2.0x	Double speed
4.0x	Four times faster

Background Color

Choose the page background:

Use canvas background color
Custom color picker
Transparent (shows through to page)

Font Settings

Setting	Options
Font Family	Monospace, Courier, Consolas
Font Size	8-24px

Info

For best results, stick with Monospace font family to ensure proper character alignment.

Loop Settings

Option	Behavior
Infinite	Loops forever
1-10	Specific number of loops

Output Structure

The exported HTML includes:

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ASCII Animation</title>
  <style>
    /* Embedded CSS for canvas and controls */
  </style>
</head>
<body>
  <div id="ascii-canvas">
    <!-- Animation renders here -->
  </div>
  <script>
    // Embedded frame data and playback logic
    const frames = [...];
    // Animation controller
  </script>
</body>
</html>

Use Cases

Standalone Viewing

Open directly in any browser
No server required
Works offline
Share via email attachment

Website Embedding

html

<!-- Using iframe -->
<iframe src="animation.html" width="800" height="600"></iframe>

Presentations

Embed in slides
Open fullscreen for demos
Works without internet

Archiving

Single file contains everything
Easy to store and share
Future-proof format

Workflow Examples

Select HTML export

Keep default settings

Export and download

Send file via email or messaging

Website Embed

Select HTML export

Set background to match your site

Choose appropriate font settings

Export

Upload and embed with iframe

Presentation Demo

Select HTML export

Set loops to Infinite

Adjust speed if needed

Export

Open in browser, press F11 for fullscreen

Customization

After Export

The HTML file is editable. You can:

Modify CSS styling
Adjust JavaScript behavior
Add custom controls
Change colors and fonts

Embedding Options

html

<iframe 
  src="animation.html" 
  width="600" 
  height="400"
  style="border: none;">
</iframe>

Isolated from parent page
Easy to implement
Size controlled by iframe

Comparing to Other Formats

Feature	HTML	Video	React
Self-contained	✅	✅	❌ (needs React)
Interactive	✅	❌	✅
Editable	✅	❌	✅
File size	Medium	Large	Small
Browser only	✅	❌	✅

When your project uses shaders, the exported HTML file includes a self-contained WebGL2 runtime that reproduces all shader effects in the browser. All GLSL shader sources are embedded — no external dependencies required.

Tips

Performance

Keep animations under 100 frames
Moderate canvas sizes work best
Complex animations may be slower

Compatibility

Works in all modern browsers
IE11 not supported
Mobile browsers work but may be slower

File Size

Factors affecting size:

Number of frames
Canvas dimensions
Whether empty cells are included

Typical sizes:

Simple animation: 10-50 KB
Complex animation: 100-500 KB
Very large: 1+ MB

Troubleshooting

Animation Doesn't Play

Ensure JavaScript is enabled
Try a different browser
Check browser console for errors

Wrong Speed

Adjust Animation Speed setting before export
Or modify the JavaScript after export

Display Issues

Verify font is available
Try different font family
Check font size setting

File Too Large

Reduce frame count
Simplify canvas content
Consider video export for very large animations