📌 Overview
Newsletter Studio is a browser-based editor that lets users build newsletters visually.
Instead of writing raw HTML, users add prebuilt blocks (header, content, images, etc.)
into a live preview area and edit them directly.
Live Preview
Drag-style Editing
Export HTML/CSS
🧭 Interface Structure
Sidebar (Left Panel)
- Elements tab: Add newsletter blocks like headers, text, images, and columns.
- Styles tab: Modify selected block appearance (color, font size, padding).
- Export tab: Download HTML/CSS files.
Main Workspace (Right Panel)
- Live preview of newsletter content
- Editable blocks (click to select)
- Generated HTML code output
- Copy-to-clipboard feature
➕ Adding Content Blocks
Users click buttons in the Elements tab to insert components:
- Header: Creates a title section (
<h1>)
- Content: Adds editable paragraph text
- Footer: Adds copyright/footer text
- Columns: Inserts a two-column grid layout
- Image: Uploads and inserts an image from device
Click a button → block is created → inserted into preview → becomes editable instantly
✏️ Editing & Styling
Each block is content-editable, meaning users can click and type directly.
- Select a block by clicking it
- Apply styles using the Style Editor
- Change background, text color, font size, and padding
A small toolbar (✕ button) appears on each block for deletion.
🧠 Internal State Logic
The app tracks the currently selected element using a simple state object:
state.selectedElement
- Only the selected block receives style updates
- Clicking a block updates the selection state
- All changes immediately refresh the code output
📤 Export System
HTML Export
Removes editing tools and returns clean newsletter markup.
CSS Export
Provides basic styling for layout, columns, and spacing.
Download HTML/CSS → use in email campaigns or websites
🖥️ Live Code Output
The right panel continuously generates HTML based on the current newsletter structure.
- Toolbar elements are removed
- Editable mode is stripped
- Clean HTML is displayed in real time
- Copy button copies final output to clipboard
⚙️ Key Features Summary
- Component-based newsletter building
- Click-to-edit content blocks
- Image upload support
- Real-time HTML generation
- Style customization per block
- One-click export system