← HTML Style Guides

Creative Tools

Interactive editors and creative instruments

◊ ◊ ◊

Stick Figure Animation Studio

Pose, keyframe, and animate stick figures with inverse kinematics. Export your creations as GIF. Powered by the StickFight engine.

Darkroom theme

Pixel Art Editor

Draw pixel art with layers, animation frames, onion skinning, and a full NES palette. Export to PNG, sprite sheets, or animated GIF.

NES / Retro theme

Sound Effect Generator

sfxr-style procedural sound effects with real-time Web Audio synthesis. Presets for laser, explosion, coin, and more. Export as WAV or tracker JSON.

Neon synth theme
🎨

Color Palette Studio

Build harmonious color palettes with color theory tools, image extraction, WCAG contrast checking, and export as CSS variables or JSON.

Minimal theme
🎨

Drawing Studio

Full-featured drawing app with multi-layer support, blend modes, HSL color picker, pressure-sensitive brushes, and PNG export. Professional dark UI.

Dark pro theme
🌈

Kid Paint

A fun, chunky drawing tool for kids with rainbow brushes, glitter pens, shape stamps, silly sounds, and a big colorful canvas.

Playful theme

Digital Spirograph

Slider-driven hypotrochoid curve generator with animated tracing, rainbow and gradient color modes, and a dozen presets for mesmerizing patterns.

Psychedelic theme

Mandala Creator

Radial symmetry freehand drawing with gem-tone colors. Even sloppy strokes produce stunning kaleidoscope patterns. Choose 4x to 16x symmetry.

Kaleidoscope theme

Gradient & Pattern Generator

Build CSS gradients with a visual color stop editor and angle dial. Create seamless tiling patterns from stripes, dots, checkerboards, and more. Copy the CSS in one click.

Dark design-tool theme
🖼

Image Toolbox

All-in-one image utility: convert formats, crop, resize, adjust, compress, make GIFs, transform, batch process, and handle PDFs. No ads, no uploads.

Utility

Tiling Pattern Maker

Design seamless repeating patterns with geometric shapes. Place, rotate, and layer circles, triangles, hexagons, and more. Preview tiled repetition in real-time and export as PNG.

Blueprint theme

ASCII Art Editor

Paint with characters on a grid canvas using box drawing, block elements, and symbols. Draw, erase, fill, and copy your creations as plain text.

CRT terminal theme

Isometric Scene Builder

Build charming isometric dioramas by stacking blocks on a grid. Grass, stone, water, wood, and more. Layer up to 16 levels high and export your scene as PNG.

Voxel theme
Aa

Font Pairing Playground

Preview Google Font combinations on article, card, and hero layouts. 15 curated pairings, adjustable weights and spacing, and copy the CSS with one click.

Typographic theme

CSS Box Shadow Designer

Build layered CSS box-shadows with per-layer offset, blur, spread, color, and inset controls. 9 presets from subtle to neumorphic. Copy the CSS instantly.

Dark design-tool theme

SVG Icon Editor

Draw vector icons with rect, circle, ellipse, line, and pen tools on a snap-to-grid canvas. Preview at multiple sizes and export clean SVG code.

Blueprint theme

Maze Generator

Generate mazes with DFS, Prim's, or Kruskal's algorithms and watch them carved step by step. Solve with BFS or A* pathfinding. Educational and mesmerizing.

Algorithmic theme

Fractal Explorer

Dive into the Mandelbrot and Julia sets with click-to-zoom, pan, and smooth coloring. Six color palettes and nine preset locations to explore infinite complexity.

Cosmic theme

CSS Animation Editor

Build CSS keyframe animations visually with a timeline, easing curves, and live preview. Edit transforms, opacity, and filters frame by frame. Copy the CSS instantly.

Dark design-tool theme

Cellular Automata Lab

Simulate Conway's Game of Life and other cellular automata rules on a grid. Draw patterns, adjust speed, and watch emergent complexity unfold step by step.

Computational theme
📊

Chart Maker

Create bar, line, pie, and area charts from your data with a visual editor. Customize colors, labels, and axes. Export as PNG or SVG for presentations.

Data visualization

Dungeon Generator

Procedurally generate dungeon maps with rooms, corridors, doors, and treasure. Tweak algorithms, room counts, and density. Export maps for tabletop RPGs.

Fantasy theme

Flow Field Visualizer

Watch thousands of particles trace paths through Perlin noise flow fields. Adjust scale, speed, turbulence, and color palettes for mesmerizing generative art.

Nebula theme
🌿

L-System Tree Generator

Define L-system rewriting rules and watch fractal trees, ferns, and botanical forms grow. Adjust branching angle, iterations, and colors. Export as PNG.

Botanical theme

CSS Grid Playground

Deep-dive into CSS Grid with visual track editors, named grid areas, item placement controls, and preset layouts like holy grail and dashboard. Copy the generated CSS instantly.

Dark design-tool theme

CSS Layout Playground

Experiment with CSS Grid and Flexbox interactively. Add items, tweak properties, and see the layout update live. Copy the generated CSS for your projects.

Dark design-tool theme

Markdown Editor

Write Markdown with a live rendered preview, syntax highlighting, and multiple themes. Supports tables, code blocks, task lists, and export to HTML.

Editorial theme

Particle Designer

Design particle systems visually with emitters, forces, color gradients, and lifetime curves. Presets for fire, snow, sparks, and more. Export as JSON config.

Ember theme

QR Code Generator

Generate QR codes for URLs, text, Wi-Fi, vCards, and more. Customize colors, size, and error correction level. Download as PNG or SVG.

Dark tool theme
/.*/

Regex Tester

Write and test regular expressions with real-time match highlighting, capture group inspection, and a cheat sheet. Supports JavaScript regex flags.

Developer tool

CSS Shape Generator

Generate CSS shapes using clip-path, border-radius, and transforms. Triangles, stars, polygons, blobs, and more. Preview live and copy the CSS code.

Dark design-tool theme
🎶

Soundscape Mixer

Layer ambient sounds like rain, thunder, fire, wind, and birdsong into relaxing soundscapes. Adjust volume per channel and save your favorite mixes.

Ambient theme

CSS Text Effects

Browse and customize CSS text effects: gradients, glows, shadows, 3D, glitch, neon, and more. Preview on your own text and copy the CSS with one click.

Dark design-tool theme

Tile Map Editor

Paint 2D tile maps with an 8-bit tile palette, multiple layers, and a mini-map. Perfect for game level design. Export as JSON or PNG sprite sheets.

NES / Retro theme

Voronoi Diagram Editor

Place seed points and watch Voronoi tessellation update in real time. Color by distance, add noise, and export geometric patterns as SVG or PNG.

Geometric theme

Wireframe 3D Viewer

Load and view 3D wireframe models with rotation, zoom, and perspective controls. Built-in primitives like cube, sphere, torus, and teapot. Blueprint aesthetic.

Blueprint theme

Waveform Editor

Design custom waveforms with additive synthesis, ADSR envelopes, LFO modulation, and a harmonic series editor. Preview on a piano keyboard and export as WAV or WebAudio code.

Synth design theme

CSS Animation Builder

Build @keyframes animations visually with a draggable timeline, cubic-bezier easing editor, transform and appearance controls, and a live preview. Export clean CSS.

Dark design-tool theme

Pixel Font Editor

Design bitmap fonts character by character on a configurable grid. Draw with pencil, eraser, fill, line, and mirror tools. Preview live text, adjust kerning, and export as PNG sprite sheet or JSON.

CRT terminal theme
😄

Emoji Composer

Drag and drop emojis onto a canvas to compose sticker-style images. Resize, rotate, layer, flip, and adjust opacity. Export as PNG with preset templates.

Playful theme

Timeline / Gantt Maker

Plan projects with a zoomable Gantt chart. Add tasks, milestones, swimlane groups, and dependency arrows. Drag to resize and reposition. Export as PNG, SVG, or JSON.

Dark project-planning theme
🎬

Slides

HTML presentation viewer & visual slide editor with themes. JSON decks, keyboard nav, fullscreen, and drag-resize editing.

Presentation theme
👁

Color Blindness Simulator

Simulate protanopia, deuteranopia, tritanopia, and achromatopsia on color palettes and images. WCAG contrast checker and accessible palette suggestions built in.

Accessibility tool

Circuit Lab

A virtual electronic project kit inspired by Radio Shack's 150-in-1. Wire spring terminals, light LEDs, spin motors, and buzz buzzers with 10 guided projects.

Electronics simulator
{ }

JSON Formatter & Validator

Paste or upload JSON for real-time validation with error highlighting. Format, minify, sort keys, explore with a collapsible tree view, and search keys and values.

Developer tool
🌎

Map Maker

Draw polygon regions, place markers with icons, and add text annotations on a pan-and-zoom canvas. Layers, preset palettes, export PNG, save/load JSON.

Cartographer theme