Edit Room.

Design in the browser, without limit.

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.

Responsive and flexible by default.

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.

Built for your Workflow. Test 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.

Content First.

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.

Demo Screens

Give it a try.

 
Name Your Design

Content.

  • list of content items
  • list of content items
  • list of content items

Comps.

  • preview of design
  • preview of design
  • preview of design

Behaviors.

Animations.

Name Your Design

Create responsive web design prototypes instantly.

Write with markdown or import content from the web.

Drag and drop your images.

Design and share, live.

Updates 7.29.13

changelog update 7.29.13

enhancements to nudge keyboard tools:

  • command-shift click any layer to expand to full width. This actually resets all transform styles, so it's great for quickly creating a linear narrow-screen layout from a full-width one.
  • command-arrow keys nudge with snapping to grid points. This includes the document grid when it's visible, either the vertical columns, the horizontal baseline grid, or both.
  • command-shift-arrow keys grow the dimensions while snapping to the grid. use shift-alt-arrow keys to shrink the dimensions, still while snapping to the grid!

enhancements to drawing layers

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.

grid updates

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.

view updates

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.

design panel design enhancements

The icons for each sub-panel now disappear when the panel is fully opened, for a much cleaner look.

changelog update 7.23.13

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.

A draft post about coding

coding for happy accidents

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.

Whatever you want

This is a different kind of design tool.

No frameworks.

No bootstrap. No foundation. Nobody deciding button styles or grids for you.

Just a simple, flexible canvas, an automatic smart grid, and just enough control.

Discover your creative freedom with a visual design tool that's true to the web.

crazy creative freedom.

Key Shortcuts

Edit Room Keyboard Shortcuts

selection

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.

view

space + drag - pan the viewport.

minus - zoom out 10%

plus - zoom in 10%

layers

delete - delete selected layer.

Command + j - duplicate selected layer.

Command + Click - select child element of a layer.

undo

z - undo.

shift + z - redo.

Draw some Layers

This is a document.

Try it for yourself.

Edit Room: Basic Principles

Respects your experience.

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.

Your design work is the most important thing.

Designs are full-screen (full-window), and the controls are overlaid only when they're needed.

Instant Feedback for your changes.

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.

Design with content in mind.

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.

Developer-friendly output.

Edit Room's exports are standards-compliant HTML and CSS. Markup and styles created are relatively clean. It's easy to hand-edit and add interactivity, javascript, forms, anything else, once the layout and visual design is complete. You can even extract portions of designs and paste them into other templates. It's totally up to you.

Don't try to do everything.

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.

Create an account today so you can save your own work!

You shouldn't be struggling with fixed-width desktop apps that don't even render fonts correctly. Start using Edit Room for your content, layout, and design work, and save time, prototype better, and share your work in progress with colleagues and clients.

Get started now.