Life & fun · alternatives · 2026
24 alternatives to SCSS live editing with Sublime Text
Takana lets you see your SCSS and CSS style changes live, in the browser, as you type them - mechio/takana
Takana is a tool for Sublime Text that enables developers to see SCSS and CSS style changes instantly in the browser as they type. It bridges the gap between code editor and browser preview, allowing real-time visual… Below are 24 products that do a similar job, ranked by how close each is in meaning and then by launch-day votes. SCSS live editing with Sublime Text launched in 2014; newer entries below may have overtaken it.
- 1
TAKANA▲7Takana lets you see your SCSS and CSS style changes live, in
2015 · usetakana.com · its alternatives →
- 2
Devsync▲319Visually edit CSS. Live-sync the result with your editor.
2020 · devsync.co · its alternatives →
- 3
- 4
Inspired by the design and UI/UX of apps like Notion, and utility of open-source apps like StackEdit, I decided to create a minimalistic, local-only WYSIWYG Markdown editor. Some features worth highlighting: - Monaco editor and Prettier integration for code snippets - Tables (apparently the holy grail of WYSIWYG editing) - Embeds (for CodePen, CodeSandbox and YouTube, most useful for HTML or JSON exports) - Accepts Markdown paste-in, and "exports"/generates HTML, Markdown and JSON outputs - Collaboration (with real-time awareness and initial commenting system, available only when…
2023 · editor.vrite.io · its alternatives →
- 5
- 6
Hi HN! I've just released CSS Studio, a design tool that lives on your site, runs on your browser, sends updates to your existing AI agent, which edits any codebase. You can actually play around with the latest version directly on the site. Technically, the way this works is you view your site in dev mode and start editing it. In your agent, you can run /studio which then polls (or uses Claude Channels) an MCP server. Changes are streamed as JSON via the MCP, along with some viewport and URL information, and the skill has some instructions on how best to implement them. It contains a…
Apr 2026 · cssstudio.ai · its alternatives →
- 7
Visual editor for learning and quick CSS mocking
2020 · cssbuilder.veliovgroup.com · its alternatives →
- 8
A collection of CSS effects with a click to copy.
2019 · emilkowalski.github.io · its alternatives →
- 9
CSS Scan 3.0▲256The fastest and easiest way to check, copy and edit CSS
2022 · getcssscan.com · its alternatives →
- 10
Point and click any element in your browser, then let Claude, Cursor, Antigravity, or Qwen write the code. Dosmos bridges visual design and AI-powered frontend development.
Feb 2026 · dosmos.app · its alternatives →
- 11
TurboStyle▲166Hi HN, I built TurboStyle, a Chrome extension that lets you visually edit CSS properties directly on any website - no dev tools or code required. A few features: - Edit styles, text, images, and videos in-place - Toggle between mobile/tablet/desktop previews - See before/after comparisons - Export CSS - Create and reuse style presets Would love your feedback, ideas, or opinions.
2025 · turbostyle.io · its alternatives →
- 12
- 13TI
Hi HN! My name is Nick and this is my fun side project. Please lay it on me. HN can think of Tips.io as a cracked out Tailwind Playground that has page management and amazing AI integration. There are a few core ideas: 1) The HTML is the CMS There are no fields or restrictions. Just hover, click, and start tweaking any HTML. Also, certain elements you click will have special easy edit abilities: - auto creates an uploader, stock photo picker (or HTML) - auto creates an uploader, stock video picker (or HTML) - auto creates a big icon picker (or HTML) - auto creates a WYSIWYG Editor (or HTML)…
2024 · tips.io · its alternatives →
- 14
- 15
Piny▲121Hi, Matjaz here. Piny is a visual editor that runs directly in Visual Studio Code, Cursor and Windsurf. It supports Tailwind CSS, Astro, React and Next.js. All edits happen directly in the code, so there are no abstractions, no cloud services and no lock-in. Piny doesn’t try to be all-in-one visual editor that would cover layout creation, styling, data, logic… That is no longer relevant in the age of AI coding agents. Instead, Piny focuses on two areas where it can really add value: # Tailwind styling Piny lets you easily style JSX / HTML with Visual Controls and Class Inspector (an…
2025 · getpiny.com · its alternatives →
- 16XC
2013 · xpressive.org · its alternatives →
- 17
Snippetty▲153Effortless live code demos that work every single time!
2018 · snippetty.io · its alternatives →
- 18
Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click.
2022 · getcssscan.com · its alternatives →
- 19
2022 · remix-page-blocks.vercel.app · its alternatives →
- 20
Chrome extension for visually modifying any Tailwind website
2023 · its alternatives →
- 21BB
I built a web-based app for building websites. The main unique features are: 1. The ability to copy and paste any HTML and CSS into the editor with no limits. I was never able to find another app that could do this without some form of limitation. 2. CSS filtering, which means you can click on an element to view and edit the CSS selectors and rules that apply to that element alone. In many cases I've found CSS naming conventions like BEM to become irritating at certain scales, so this is an alternative solution. This part of the app needs some more development work but the concept is there.…
2024 · demo.gocodestudio.com · its alternatives →
- 22
Tweaklify▲68Fast DOM prototyping & live style editing
May 2026 · chromewebstore.google.com · its alternatives →
- 23
ArachStudio ▲80Live-edit your GitHub components directly in the browser
Jul 2026 · arachstudio01.vercel.app · its alternatives →
- 24SE
2018 · styleurl.app · its alternatives →
Also compare
Ranked by how close each launch is in meaning, then by votes. Prices were read from each product’s own site when checked and can change. Refine with your own description →