Visual editor
Every widget includes a point-and-click visual editor. Changes apply in real time — what you see is what your visitors see. No need to re-embed after changes; updates propagate automatically to all embedded instances.
Colors
Set colors with the color picker or paste hex (#3b82f6), HSL, or RGB values directly. Available slots:
- Primary — accent color for buttons, highlights, active states
- Background — widget container background
- Foreground — primary text color
- Muted — secondary text and borders
- Accent — hover states and interactive elements
All widgets support dark mode. Colors adapt based on the user’s system preference, or you can lock a specific theme.
Typography
Available font options:
- System UI (default, fastest load)
- Inter, Roboto, Open Sans, Lato
- Poppins, Montserrat, Raleway
- Space Mono, JetBrains Mono (monospace)
Adjust font size and weight per element. Headings and body text can use different fonts.
Spacing and layout
- Padding — inner spacing between content and edges
- Border radius — 0 for sharp corners, higher for rounded
- Border — toggle visibility and color
- Width — fixed or container-fill
- Shadow — optional drop shadow for depth
Widgets are responsive by default and adapt to container width.
Style presets
Built-in presets combine colors, typography, spacing, and layout into curated starting points:
| Widget | Available presets |
|---|---|
| Clock | Digital Minimal, Digital Card, Analog Classic, Analog Modern |
| Countdown | Minimal, Flip, Neon, Gradient, Glass |
| Pomodoro | Bento, Glass, Minimal, Focus, Editorial |
| Todo | Card, Compact, Minimal |
| Page Views | Minimal, Badge, Pill, Card, Neon |
Select a preset, then fine-tune individual properties.
Configuration reference
Each widget has behavior-specific settings beyond visual styling:
| Widget | Key settings |
|---|---|
| Clock | Timezone, 12/24h format, show seconds, show date, date format |
| Countdown | Target date, expired message, style, show labels, unit toggles |
| Pomodoro | Focus/break durations, sessions per cycle, auto-advance, sound profile |
| Todo | Due dates toggle, filters, task count, variant, placeholder text |
| Page Views | Variant, emoji, message suffix, show count, track on load |
| Habit Tracker | Habit definitions, unit labels, target goals, active days |
| Form | Pages, field types, submit label, progress bar, after-submit action |
| Document Chat | Display name, persona, suggested questions, temperature, max context |
See individual widget pages under Widgets for full details.
Custom CSS (Pro)
Pro users can inject custom CSS from the “Advanced” tab in the editor. CSS is scoped to the widget container and cannot affect the host page.
/* Custom container */
.widget-container {
border: 2px solid #e5e7eb;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-radius: 16px;
}
/* Custom text */
.widget-container h2 {
font-family: "Georgia", serif;
letter-spacing: -0.02em;
}
/* Custom buttons */
.widget-container button {
border-radius: 999px;
}Tips:
- Use browser DevTools to find selectors
- Avoid
!important— widget specificity is intentionally low - Test in both light and dark modes
- Custom CSS persists across preset changes
Live preview
The editor includes a live preview pane. Toggle between desktop, mobile, and dark mode views. Changes are instant — the editor auto-saves as you work.