Developer Reference

Documentation

Everything you need to know about using Live Web Tester, editor shortcuts, iframe security, and file export workflows.

1. Editor Interface & Tabs

The workspace consists of three dedicated code panels accessible via the top tab bar:

  • index.html: Write standard HTML5 markup, CDN links (e.g. Tailwind, Google Fonts), and containers.
  • styles.css: Custom CSS rules that are automatically injected into the document head.
  • script.js: Vanilla JavaScript executed inside the sandboxed iframe after DOM rendering.

2. Boilerplate Templates

Use the Templates dropdown in the top navbar to instantly load standard boilerplates:

HTML5 Base

Clean container and basic heading structure.

Tailwind Setup

Pre-configured Tailwind CDN with responsive card UI.

Flexbox Grid

Complete multi-column app layout boilerplate.

3. Project Export Workflow

Clicking Export ZIP triggers client-side generation through JSZip. The downloaded zip file includes properly linked assets:

live-tester-project/
├── index.html      <-- Links to style.css and script.js
├── style.css
└── script.js

Ready to test your frontend code?

Launch the live playground right in your browser with zero setup.

Launch Editor Now