Write HTML and CSS, see it live.
This is a fun project for quick prototyping and learning. It's not meant to replace your actual IDE or development environment. For serious web development work, stick with VS Code, WebStorm, or your preferred professional tools.
Desktop/Laptop Only: This plugin is optimized for desktop and laptop use. While it may work on mobile devices, the interface and features are designed for larger screens and keyboard/mouse interaction.
I got tired of switching between Obsidian and CodePen just to test a quick CSS idea. So I built this plugin to turn Obsidian into a simple code playground.
Use it for:
- Testing CSS ideas quickly
- Learning web development
- Making examples for your notes
- Quick prototypes
- Write HTML and CSS side by side
- See your changes instantly in the preview
- Export to files or copy to clipboard
- Works with your Obsidian theme
Yeah, it does Sass too. Variables, mixins, nesting - all that good stuff. Plus you get autocomplete and can see the compiled CSS output.
Click any color in your CSS to change it visually. No more guessing hex codes.
- 20+ ready-made animations (fade, bounce, slide, etc.)
- Build custom animations with a visual editor
- See how smooth your animations are running
Test your designs on different screen sizes - iPhone, iPad, Desktop, or make your own custom size. Rotate between portrait and landscape with one click.
- Spacebar + drag to pan around
- Ctrl + scroll to zoom in/out
- Sometimes it's easier to just use the scroll, I will work on improving this later in time
- Zoom buttons for precise control (5% increments)
- Double-click to center
Save projects as markdown files anywhere in your vault. Load them back anytime. They're just regular notes with code blocks, so you can edit them normally too.
- Open the plugin (ribbon icon or command palette)
- Write some HTML in the top editor
- Add CSS in the bottom editor
- Watch it update live on the right
Toggle the CSS/Sass switch to use Sass. You get variables, mixins, nesting - the works. Click "Templates" for common patterns.
Click any color swatch in your CSS to open a color picker.
- Click "Animations" to browse 20+ presets
- Click "Builder" to make custom animations
- Click "Inspector" to see performance stats
Use the device dropdown to test different screen sizes. Click the rotate button to flip between portrait and landscape.
- Ctrl + scroll to zoom in/out
- Double-click to center the preview
- +/- buttons for precise zoom (5% steps)
Press "Save Project", give it a name, pick a folder. It saves as a markdown file you can edit like any other note.
Ctrl+S- Save as HTML fileCtrl+Shift+C- Copy to clipboardF5- Refresh preview
- Drag the divider to resize panels
- Use Picture-in-Picture to keep preview visible while coding
- The preview updates as you type (with a tiny delay so it's not crazy)
- Projects are just markdown files with code blocks - edit them however you want
Search for "HTML/CSS Editor" in Obsidian's community plugins.
- Download the latest release from GitHub
- Extract it to
{YourVault}/.obsidian/plugins/ - Restart Obsidian
- Enable it in Settings
Just grab the release files, not the source code.
If you want to mess with the code:
git clone https://github.com/Daniel-Hillman/obsidian-html-css-editor.git
cd obsidian-html-css-editor
npm install
npm run buildFuture potential additions:
- JavaScript support
- Export to CodePen
- More animation stuff
- Whatever people ask for
No promises though.
Open an issue or send a pull request. I'm pretty open about contributions.
If this plugin saves you some time, feel free to buy me a coffee!
MIT - do whatever you want with it.
Thanks to the Obsidian team for making the best note-taking app everrrrrr.