📚 Interactive Guide

Learn Your Creative Tools

Five awesome tools. Zero confusion. This guide will teach you everything — step by step, nice and easy!

🎵 Open Audio Canvas Editor →
♫ my-song.mp3 3.2s 44100Hz 2ch ✂ Split Audio Splits: 1.5s P1 P2 ⬇ Download 1.7s 2ch ⬇ WAV
01 Getting Started

🎵 How to Use the Audio Editor

Follow these steps — it's like building with Lego blocks!

1

📂 Add Your Audio

Drag and drop any audio file (MP3, WAV, etc.) right onto the dark canvas. Or click the + Upload Audio button at the top. A blue box (called a "node") will pop up showing your song!

2

🔨 Add an Operation

Click any tool in the top bar — Split, Merge, or Stretch. A new node appears on the canvas. Each one does something different to your audio!

3

🔌 Connect the Nodes

See the little circles at the bottom (output) and top (input) of each node? Click and drag from an output circle to an input circle. A colorful wire connects them — the audio flows through!

4

🎧 Listen to Your Creation

Add a Listen node to hear what your audio sounds like after processing. You'll see a waveform and a play/stop button!

5

💾 Save Your Work

Add an Output node and connect your final audio to it. Click the ⬇ WAV or ⬇ WebM button right on the node to download!

02 Node Reference

🎨 What Each Node Does

Every colored box does something special. Here's your cheat sheet!

♫
Source
Your uploaded audio file. Shows the filename, duration, waveform, and a play button to listen to it.
✂
Split
Chops audio into pieces! Click "+ Add Split" and enter a time (like 3.5 for 3.5 seconds). Each piece gets its own output with a play button.
⇄
Merge
Glues audio pieces together! Connect 2 or more sources. Use the + / − buttons to add or remove input slots.
↔
Stretch
Makes audio longer or shorter without changing pitch! Drag the slider from 0.25x (super fast) to 4x (super slow).
♫
Listen
Your headphones node! Connect any audio and you'll see a waveform and play/stop button to listen.
⬇
Output
Downloads your audio! Has ⬇ WAV (highest quality) and ⬇ WebM (smaller file) buttons built right in.
03 Controls

⌨️ Keyboard & Mouse Shortcuts

These work the same in both the Audio and Image editors!

Shift+Drag
Move the canvas around
Scroll
Zoom in and out
ClickonWire
Remove that connection
Del
Delete selected node
Right Click
Open the menu
Drag→Port
Connect two nodes
04 Pro Tips

💡 Tips & Tricks

🌷
You can drop multiple files at once — they'll all appear as separate Source nodes side by side!
🔗
Made a wrong connection? Just hover over the wire (you'll see a red ✕) and click to remove only that one wire.
🎲
You can chain operations: Source → Split → Stretch → Merge → Output. The audio flows through every step!
📈
Split nodes let you play each part separately using the tiny P1, P2, P3... buttons at the bottom of the node.
🎚
Right-click any node for a quick menu — play, stop, download, disconnect, or delete!
🖼️ Open Image Canvas Editor →
🖼 photo.jpg 1920 × 1080px ✨ AI Prompt make it a pencil sketch ▶ Run 👁 Preview
01 Getting Started

🖼️ How to Use the Image Editor

Think of it as Photoshop, but with colorful blocks and wires!

1

📂 Add Your Image

Drag and drop any image (PNG, JPG, WebP, etc.) onto the canvas. Or click + Upload Image. A blue Source node appears showing a thumbnail of your picture!

2

🔑 Set Up AI (Optional)

Want to use the magic AI Prompt node? Click the 🔑 API Key button in the toolbar first and paste your Gemini API key. You only need to do this once per session!

3

🔨 Pick Your Tools

Click any tool button: AI Prompt, Crop, Resize, Filter, Merge, Text, Preview, or Output. Each creates a new node on the canvas!

4

🔌 Connect & Edit

Drag wires from output (bottom circles) to input (top circles). Adjust sliders, type prompts, pick colors — everything happens right on the nodes!

5

💾 Download Your Result

Add an Output node and connect your final image. Click ⬇ PNG, ⬇ JPEG, or ⬇ WebP to save it!

02 Node Reference

🎨 What Each Node Does

9 powerful nodes — each one is a different superpower!

🖼
Image Source
Your uploaded image. Shows a thumbnail preview and the dimensions (like 1920x1080).
✨
AI Prompt
The magic node! Click the text area, type what you want (like "remove background" or "make it a cartoon"), then click ▶ Run. Gemini AI does the rest!
✂
Crop
Cut out a piece of your image. Use the X, Y, W, H sliders to pick exactly which part you want. Click Reset to start over.
↔
Resize
Make your image bigger or smaller. Use W and H sliders, or click a preset like 1080×1080 for Instagram! Lock icon keeps the shape proportional.
🎨
Filter
7 sliders to style your image: Brightness, Contrast, Saturation, Blur, Grayscale, Sepia, Hue Rotate. Click Reset to go back to normal.
📚
Merge
Combine multiple images! Choose from 4 layouts: H (side by side), V (stacked), O (overlaid), G (grid). Use +/− to add more inputs.
T
Text Overlay
Add text on your image! Click to type, pick a color from the circles, adjust font size and position with sliders.
👁
Preview
See a big thumbnail of any connected image. Click 👁 Full Preview to see it in full size — great for checking your work!
⬇
Output
Download your final image! Three buttons: ⬇ PNG (best quality), ⬇ JPEG (smaller), ⬇ WebP (smallest). Also has a preview button.
03 Controls

⌨️ Keyboard & Mouse Shortcuts

Same controls as the Audio Editor — learn once, use everywhere!

Shift+Drag
Move the canvas around
Scroll
Zoom in and out
ClickonWire
Remove that connection
Del
Delete selected node
Right Click
Open the menu
Esc
Close text input
04 Pro Tips

💡 Tips & Tricks

✨
The AI Prompt node can do amazing things! Try: "turn this into anime style", "add snow", "make the sky sunset colors", or "remove the person".
🔒
The lock icon on Resize keeps your image from getting squished. Turn it off if you want to stretch freely!
🔗
You can chain everything: Source → Resize → Filter → Text → Output. Each step processes the image from the previous one!
🖼
Use Preview nodes anywhere in your chain to see what the image looks like at that point. You can have multiple!
🎨
The Filter node's Hue Rotate slider changes all the colors in your image — turn red into blue, green into purple, etc!
📄 Open HTML ↔ Markdown Converter →
📝 Input
📄 Output
👁 Preview
01 Getting Started

📄 How to Use the Converter

Convert between HTML and Markdown in seconds!

1

🎫 Pick Your Mode

At the top, click either HTML → MD (converts HTML code to Markdown) or MD → HTML (converts Markdown to HTML code).

2

📝 Add Your Content

You have 3 ways: Type or paste directly into the Input panel on the left. Or drag and drop a .html or .md file. Or click the Paste button to paste from your clipboard!

3

👀 See the Magic

The Output panel (middle) instantly shows the converted code. The Preview panel (right) shows what it looks like rendered — like a real web page!

4

💾 Get Your Result

Click Copy to copy the output to clipboard, or Download to save it as a file. You can also click Swap to flip the input and output!

02 Button Reference

🔨 What Each Button Does

Every button in the toolbar explained!

🔃
HTML → MD / MD → HTML
Tabs to switch the conversion direction. The tool auto-detects when you drop a file!
📋
Paste
Pastes whatever is in your clipboard directly into the Input panel. Quick and easy!
🗑
Clear
Erases everything in the Input panel so you can start fresh.
✨
Prettify
Makes messy HTML look neat and organized with proper indentation. Only works in HTML mode.
📋
Copy
Copies the output code to your clipboard so you can paste it anywhere!
⬇
Download
Saves the output as a .md or .html file to your computer.
🔄
Swap
Flips the output back into the input — great for converting back and forth to compare!
📜
Wrap Toggle
Turns word wrap on or off in the output panel. Helpful for long lines!
👁
Rendered / Raw
In the Preview panel — Rendered shows it like a web page, Raw shows the plain code.
03 Controls

⌨️ Keyboard Shortcuts

Speed up your workflow with these shortcuts!

⌘ Cmd+S
Download the output
⌘ Cmd+⇧+C
Copy output to clipboard
Drag→Drop
Load a file instantly
DragtheDivider
Resize the 3 panels
04 Pro Tips

💡 Tips & Tricks

📂
Drag and drop an .html file and the tool auto-switches to HTML→MD mode. Drop a .md file and it switches to MD→HTML mode!
🔄
Use the Swap button to quickly convert something and then convert it back — great for testing if the conversion is accurate!
✨
The Prettify button is your best friend for messy HTML. It adds proper indentation so you can actually read the code!
🖲
You can resize the 3 panels by dragging the divider lines between them. Make the preview bigger if you want to focus on how it looks!
🌐
The converter handles tables, code blocks, images, links, bold, italic, headers, lists, checkboxes, and blockquotes!
🎬 Open Video Canvas Editor →
🎬 clip.mp4 12.4s 1080p 30fps ⏱ Speed Rate: 2.0x 0.25x ————— 4.0x ⬇ Export 6.2s 1080p ⬇ WebM GIF
01 Getting Started

🎬 How to Use the Video Editor

Process your videos right in the browser — no uploads to any server!

1

📂 Add Your Video

Drag and drop any video file (MP4, WebM, etc.) onto the canvas. Or click + Upload Video. A purple Source node appears showing file info and thumbnail frames!

2

🔨 Pick Your Operations

Click any tool: Speed, Split, Merge, Filter, Region Filter, Resize, or Crop. Each creates a new node that does something different to your video!

3

🔌 Connect the Nodes

Drag from an output port (bottom circle) to an input port (top circle) to connect nodes. The video flows through each operation in sequence!

4

👁 Preview Your Work

Add a Preview node to see what your video looks like after processing. Play it right in the browser to check everything looks right!

5

💾 Export Your Video

Add an Output node, connect your final result, and click export. Choose WebM format with quality settings. Watch the progress bar as it renders!

02 Node Reference

🎨 What Each Node Does

8 powerful nodes — each one transforms your video differently!

🎬
Video Source
Your uploaded video. Shows filename, duration, resolution, and thumbnail strip of frames from the video.
⏱
Speed
Change playback speed! Drag the slider from 0.25x (slow motion) to 4x (fast forward). Duration updates automatically.
✂
Split
Cut your video at a specific timestamp! Enter a time (like 5.0 for 5 seconds) and it creates Part 1 and Part 2 outputs.
⇄
Merge
Join videos together! Connect 2+ sources and they combine in order. Use +/− to add or remove input slots.
🎨
Filter
Apply visual effects! Brightness, Contrast, Saturation, Blur, Grayscale, Sepia, Hue Rotate — 7 sliders to style your video.
🎯
Region Filter
Apply filters to just part of the frame! Set X, Y, Width, Height to define the region, then adjust filter sliders for that area only.
↔
Resize
Change video dimensions! Choose custom W × H or use presets. Lock icon keeps the aspect ratio. Supports up to 4K!
✂
Crop
Cut out a rectangular section of the video frame. Adjust X, Y, W, H sliders or use preset ratios like 16:9 or 1:1.
👁
Preview
Watch your processed video! Shows a playable video player right in the node. Check your work before exporting.
⬇
Output
Export your final video! Choose WebM format, adjust quality with the slider, and watch the progress bar as it renders.
03 Controls

⌨️ Keyboard & Mouse Shortcuts

Same canvas controls as the other node editors!

Shift+Drag
Move the canvas around
Scroll
Zoom in and out
ClickonWire
Remove that connection
Del
Delete selected node
Right Click
Open context menu
Drag→Port
Connect two nodes
04 Pro Tips

💡 Tips & Tricks

⚡
All video processing happens in your browser — your files never leave your computer! Great for privacy.
🎲
Chain operations for complex edits: Source → Split → Speed → Filter → Merge → Output. Each step feeds the next!
🎯
The Region Filter is perfect for blurring faces or highlighting specific areas — like a pro video editor!
📈
Export at lower quality first for quick previews, then bump it up for the final version. Saves time!
🌷
You can drop multiple videos at once — they all appear as separate Source nodes. Great for merge projects!
📸 Open HTML to Image Editor →
✎ HTML Source <div class="card"> <h1>Hello</h1> <p>World</p> </div> ⚡ Render 1080 × 1080 ⚡ Render 🎨 Filter Contrast +20% ⬇ Output PNG JPEG
01 Getting Started

📸 How to Use the HTML to Image Editor

Turn HTML code into beautiful social media images!

1

✎ Add Your HTML

Click HTML Source to create an editable code node — type or paste your HTML directly. Or click Template to start from a beautiful pre-made design!

2

📐 Choose a Size

Add a Size node to pick dimensions. Use presets like Instagram Post (1080×1080), Twitter Banner (1500×500), or set custom dimensions!

3

⚡ Render the Image

Add a Render node and connect your HTML Source + Size to it. Click ⚡ Render — it converts your HTML into a pixel-perfect image!

4

🎨 Post-Process (Optional)

Chain Filter, Crop, Resize, or Watermark nodes after Render to fine-tune your image. Adjust brightness, add your brand mark, or crop to size!

5

💾 Download Your Image

Add an Output node and export as PNG, JPEG, or WebP. Perfect for sharing on social media!

02 Node Reference

🎨 What Each Node Does

10 specialized nodes for HTML-to-image workflows!

✎
HTML Source
An editable code editor node. Click the text area to type HTML/CSS code that will be rendered into an image.
📋
Template
Pre-made HTML designs! Choose from social cards, quotes, announcements and more. Click any template to load it as HTML Source.
📐
Size
Set output dimensions! Use presets for social platforms (Instagram, Twitter, Facebook, LinkedIn) or enter custom width × height.
⚡
Render
The core node! Takes HTML + Size as inputs and renders it into a pixel image using html2canvas. Click ⚡ Render to process.
🎨
Filter
Post-render effects! Brightness, Contrast, Saturation, Blur, Grayscale, Sepia, Hue Rotate — style your rendered image.
✂
Crop
Trim your image to the perfect size. Adjust X, Y, Width, Height with sliders or enter exact pixel values.
↔
Resize
Scale your image up or down. Lock icon maintains aspect ratio. Great for fitting platform requirements.
💧
Watermark
Add text watermark to your image! Click to type, adjust size, position, opacity, and color for branding.
👁
Preview
See a live thumbnail of your image. Click 👁 Full Preview to view at full resolution and inspect details.
⬇
Output
Export your final image! PNG (lossless), JPEG (smaller), or WebP (smallest). Adjust quality with the slider.
03 Controls

⌨️ Keyboard & Mouse Shortcuts

Same canvas controls as the other node editors!

Shift+Drag
Move the canvas around
Scroll
Zoom in and out
ClickonWire
Remove that connection
Del
Delete selected node
Right Click
Open context menu
Esc
Close text editor
04 Pro Tips

💡 Tips & Tricks

🎨
Use Templates as starting points — then edit the HTML to customize colors, text, and layout to match your brand!
📸
The Size node has presets for every major social platform — Instagram, Twitter, Facebook, LinkedIn, YouTube, and more!
💧
Add a Watermark node at the end of your chain to brand every image you create. Adjust opacity so it's subtle!
🎲
Full pipeline: Template → Size → Render → Filter → Watermark → Output. Batch-style creation for social media!
✨
Your HTML can use inline CSS, Google Fonts, gradients, shadows — anything that works in a browser works here!
Built by ZeroOne DotsAI — Now go create something awesome!