Edit Room gives you a visual design environment with precise controls for type, color, layout, spacing, display breakpoints, and more.
You can design in the browser by eye with visual tools, no coding required.
You get prototype-ready HTML and CSS from your work. Live reviews with a sharable link. Save your time, save everyone's time.
Let your creativity flow with the best tool for modern web design.
Edit Room automatically creates flexible layouts while you work.
Adjust the display width and you can immediately preview your vision across all possible widths.
Design for multiple screens. Create custom breakpoints where the styles need to change, and then adjust until it's flexibly perfect, everywhere.
Go from content outlines to low-fi wireframes to high-fi prototypes all in the same tool.
Design live with your team and clients with handy review urls that update live, as you work — easily design across multiple devices.
Start your design off right with a workflow that ensures you're designing with real content. It's up to you.
Use plain text, HTML fragments (try IMG tags) or Markdown for content.
Drag and drop to import any web-ready images, including SVG.
No more 'out of content' messages - keep drawing new layers and use the new 'edit layer text' button to write something new, without leaving your design. Of course you can still double-click any layer to edit the text instantly, and command+return still means "i'm done editing this".
You'll also notice that editing content in the design editor updates instantly.
The document grid now saves it's state - if you set it to display columns, the next time you edit that design, your grid columns will be visible. Same with baseline, or the combined grid views.
The default zoom of the design editor is now back to 100%. Use + and - keys to quickly zoom in and out, and space-drag pans the canvas around to wherever you'd like.
The icons for each sub-panel now disappear when the panel is fully opened, for a much cleaner look.
new 'edit this content' button in the typography control group - click once to edit the content, click it again to be done. You can still double-click to do the same, and Cmd+Enter closes the editor.
Added a vertical snap line at 100% document width.
made the color palette overlay a little shorter so the alpha slider is visible at the same time.
i've got a flexible way of building web applications. some days i work on the billing system. some days i'm working on the css effects stacks. some days I don't get a chance to sit down and write, but i've got ideas working though the user interface in my head that are percolating/refining so to speak.
one thing that i've noticed, i'll come back to this. features sneak out organically.
i don't write out specs ahead of time. i use my tool to design things until I get stuck on a missing feature, or some unexpected behavior, then i go fix it or design something new. sometimes it takes a while – repeatedly coming up against the same limitations, the same awkward interaction or animation – to find a solution.
one of my favorite writers about modern design is mark boulton. he has a way of pining for the 'happy accidents' of design that happen when you're using a visual tool, usually photoshop, to bring ideas to life. his point is that only by seeing the 'shape of design' in front of you, and being able to manipulate it right there, can you come across these accidents, that often make the work better than it would have been otherwise.
these accidents don't exclusively happen in the design world. there are similar ways to express that creativity and things in a code editor as well.
1 - 9 - select layer by number.
[ - select previous layer. also works for child layers.
] - select next layer. also works for child layers.
0 - drop selection.
space + drag - pan the viewport.
minus - zoom out 10%
plus - zoom in 10%
delete - delete selected layer.
Command + j - duplicate selected layer.
Command + Click - select child element of a layer.
z - undo.
shift + z - redo.
Edit Room feels as much as possible like working in a desktop image editing suite. Think photoshop + after effects, but radically simplified. Featuring intuitive key commands and modifiers for drawing and adjusting elements.
Designs are full-screen (full-window), and the controls are overlaid only when they're needed.
Whatever property you adjust, the interface will disappear, just showing you the results of your changes. You only see feedback for the value you're changing echoed at the top of the screen.
Edit Room forces a content-first and content-out design process. That doesn't mean content has to be final before starting design, but there should be a solid outline and a draft of some sort, that you can revise in the tool to refine your message.
Edit Room doesn't include controls for every single possible CSS property. Focus on what’s most important to design: content, form, color, type, rhythm, and context.