# HTML‑Viewer.org — Browser‑based HTML/CSS/JS Editor with Two‑Way Sync
## Official URL
https://html-viewer.org

## Skill Overview
This is a self‑contained browser‑only development sandbox for web code. It removes the need for local IDE setup, and focuses on learning, debugging and rapid prototyping of HTML, CSS and JavaScript snippets.
Its most distinctive feature is **bidirectional sync highlighting**: code and live preview are tightly linked. You can explore how markup translates into rendered page elements, and quickly locate problematic parts of your code without manual searching.
Besides code inspection, it also provides what‑you‑see‑is‑what‑you‑get visual editing directly on the preview surface. Common content edits can be done with simple toolbar actions, and the corresponding HTML markup is auto‑generated behind the scenes, saving repetitive typing work.
All processing runs inside the user’s browser. No source code is uploaded to external servers, keeping user code private.

## Key Features
### 🔗 Bidirectional Highlight Linkage (Signature Feature)
1. Click or select code in the editor panel: the matching DOM element in preview gets highlighted visually. This lets you immediately see which piece of code controls which part of the webpage.
2. Click any element, text block or image inside the live preview: editor automatically scrolls to the relevant source lines and highlights them.
3. Useful for debugging layout issues, understanding web markup, and tracing where a certain style or content comes from. You can toggle this linkage on/off when needed.

### ✏️ WYSIWYG Visual Editing on Preview
Activate visual edit mode on the preview pane to modify content without hand‑writing HTML tags:
- Text formatting: bold, italic, adjust font size, alignment
- Content insertion: add images, create ordered / unordered lists
Every change made in the preview view will update the editor’s source code in real‑time.

### 📂 File & Code Utilities
- Import local HTML / CSS / JS files directly into the sandbox
- One‑click code beautify / format to clean messy indentation
- Basic syntax validation and error detection for HTML markup
- Export finished code as local files for offline saving
- Dark mode support for extended coding sessions
- Collapse / expand nested code blocks for reading long code
- Open preview or source in new browser tab

## Target Users
- Front‑end learners studying HTML/CSS/JS and want to see direct mapping between code and output
- Developers testing small code snippets and quick prototypes
- UI/UX people checking static page outputs
- QA engineers hunting for display‑related code issues
- Hobbyists building small web tools and demo pages

## Technical Behaviour
- Entirely client‑side execution. No backend calls for code processing.
- Built‑in sandbox renderer for HTML, CSS and JS preview.
- Responsive layout, works on desktop, tablet and mobile browsers.
- No account, no installation required, just open the website.

## Media Assets
- `screenshot‑two‑way‑highlight.png`: Screenshot showing bidirectional highlight interaction between editor and preview
- `screenshot‑visual‑edit‑toolbar.png`: Screenshot showing preview‑side WYSIWYG editing toolbar
- Optional demo video `demo‑html‑viewer‑usage.mp4`: Walkthrough of bidirectional highlight and visual editing workflow

## Typical Workflow
1. Visit https://html-viewer.org
2. Paste code or import local files into the left editor
3. Right‑hand preview renders the live webpage output
4. Use bidirectional highlight to trace code‑element relationships for learning and debugging
5. Enable visual editing to modify content directly on preview, watch source code update automatically
6. Format code, then export result to local files

## Limitations & Notes
- Designed for small‑to‑medium snippets, demos and learning. Not a replacement for full‑featured professional IDE for large‑scale projects.
- Visual editing covers basic content styling and structure. Complex layout logic still needs manual code edits.
- All user code stays local; nothing is sent to remote servers.