🧰 Main Features
- Live HTML Preview: See your HTML code rendered instantly.
- Dark & Light Preview Themes: Toggle between night/day mode for the preview pane.
- Safe HTML Sanitizer: Automatically removes risky or unsupported HTML for security.
- Text Formatting Buttons: One-click insertions for tags like
<b>,<i>,<a>,<img>, and more. - Font Styling Panel: Easily apply web-safe fonts, sizes (1–7), and font colors.
- Undo/Redo Support: Keyboard shortcuts and buttons for easy backtracking.
- Import & Export: Save your work or import HTML from
.htmlor.txtfiles. - Copy to Clipboard: One-click to copy your HTML content.
- Resizable Preview Area: Resize vertically to better inspect your layout.
- Mobile-friendly & Responsive: Built with TailwindCSS for clean layout on all screen sizes.
✏️ How to Use
1. Writing HTML
Type or paste your HTML code into the large gray input area labeled “Enter your HTML here…”. The preview below updates automatically.
2. Using Format Buttons
Use the buttons at the top to quickly insert common tags:
| Button | Tag Inserted |
|---|---|
| B | <b></b> (Bold) |
| I | <i></i> (Italic) |
| U | <u></u> (Underline) |
| S | <s></s> (Strikethrough) |
| Link | Prompts for URL and wraps it in <a> |
| Image | Prompts for image URL + alt text <img> |
| Video | Accepts YouTube/Vimeo links and embeds them |
| Center | Wraps in <center></center> |
| BR | Inserts <br> (line break) |
| HR | Inserts <hr> (horizontal rule) |
| H1–H3 | Inserts heading tags |
| UL/OL/LI | Insert list structures |
3. Applying Fonts
Use the Font Panel:
- Font: Select from common web-safe fonts.
- Color: Choose a text color.
- Size: Set a font size from 1 (smallest) to 7 (largest).
- Click Apply Font to wrap selected text in a
<font>tag.
4. Undo & Redo
- Undo: Ctrl+Z or click the ⬅️ button.
- Redo: Ctrl+Y or click the ➡️ button.
5. Import/Export
- Import: Click Import HTML and select a
.htmlor.txtfile to load. - Export: Click Export HTML to download your content.
- Copy HTML: Copies your code to clipboard.
6. Preview Settings
- Click the 🌙/☀️ icon to toggle between night/day preview.
- The preview panel is resizable—drag it vertically to see more or less.
🔐 Safety & Sanitization
To keep you safe, the app cleans your HTML:
- Disallowed:
<script>,<form>, inline JS, and similar. - Only certain attributes and tags are allowed (like
<img src="">,<a href="">). - Video embeds only work from YouTube and Vimeo (via HTTPS).
💾 Auto-Save
The editor automatically saves your progress in the browser (via localStorage). Revisit the app later and your last session will still be there.
🔙 Navigation
Click the Back to nekypop.com button at the top if you want to return to the main site.
❓ Tips & Shortcuts
Want a fresh start? Just erase the input area.
Press Tab in the editor to insert two spaces.
Press Ctrl+Z or Ctrl+Y for undo/redo.