Shorten the feedback loop
Let users select an element and see visual changes in context.
A more direct way to refine the details of a page.
A browser-based studio for visually refining HTML and Tailwind.
The overview
Visual Style Editor, in context.
Small visual adjustments can become slow when every change requires another round of manual code editing.
A browser-based studio for visually refining HTML and Tailwind.
Why this work matters
What a business can take from this.
Useful for teams improving a repetitive creative workflow. These are the opportunities the design is intended to support; results depend on the business and how the experience is used.
Make control approachable
Place styling controls beside the page being edited.
Keep the work portable
Return edited code through an export flow for use outside the tool.
SectorCreative tools
FocusProduct design & web development
Built withAstro, React and TypeScript
The challenge
A clear problem to solve.
Make it possible to inspect and adjust a page visually while keeping the underlying code available to its creator.
The objective
Shorten the loop between seeing a design decision and applying it.
The approach
How the pieces connect.
Bring an interactive canvas, style controls and code export into a browser-based editing workflow.
The experience, connected
How Visual Style Editor comes together.
Explore the parts of the experience and the path they create for the people using it.
Experience map03 connected parts
Each segment represents one part of the experience, not a percentage or performance measure.
Select a part to explore
01Live canvas
Users can bring an HTML file into a canvas and select elements to work on.
02Visual controls
Style controls provide a visual way to adjust properties and see changes in context.
03Code export
An export flow returns the edited code for use outside the tool.
The path through
From first look to next step.
Shorten the loop between seeing a design decision and applying it.
- 01Open an HTML file
- 02Select and refine
- 03Export the result
A closer look at Visual Style Editor.
Explore the screens behind the experience.
Inside the experience
Three parts of the solution.
Open each part to see the thinking behind the experience.
01Live canvas
+
Users can bring an HTML file into a canvas and select elements to work on.
02Visual controls
+
Style controls provide a visual way to adjust properties and see changes in context.
03Code export
+
An export flow returns the edited code for use outside the tool.
The journey
From first look to next step.
A simple way to understand the experience from the visitor's perspective.
- 01
Open an HTML file
Users can bring an HTML file into a canvas and select elements to work on.
- 02
Select and refine
Style controls provide a visual way to adjust properties and see changes in context.
- 03
Export the result
An export flow returns the edited code for use outside the tool.
More of the experience.
See how the details come together across the project.
The design principle
A creative tool is strongest when direct manipulation remains connected to portable output.
Continue exploring
Next case study9WERKS