Inspect designs inside Atom editor

Integrate Avocode web app with Atom to inspect Photoshop & Sketch designs inside your text editor and get code suggestions from layer styles.

Install Avocode package

View design inside Atom

Don’t change environments and open designs inside your text editor.

Get code suggestions

Easily click on any design layer and get code suggestion in Atom editor.

Import a whole code snippet

Press CMD/CTRL + SHIFT + P to import a whole code snippet of a particular layer.

Atom with Avocode integration

Stay in Atom and do so much more

Avocode is a just as great for measuring, exporting images, and generating code, as for design team collaboration, feedback, and version control. All inside Atom.

How to install Avocode in Atom?

  1. Open Atom, press CMD/CTRL + SHIFT + P and type in "avocode" and choose if you want to see Avocode on the rigfht or left.
  2. Open a design in the embeded Avocode, click on a layer and the CSS displays in the Avocode code panel on the left.
  3. Click back to your style sheet and type either a name of the selector or a specific property like width. You’ll get a suggestion which you can autocomplete by hitting Enter.
  4. Prepare a selector and press CMD/CTRL + SHIFT + V to import a whole code snippet of a particular layer.

Export 10 different code languages

Switch between CSS, Less, Sass, SCSS, Stylus, React Native, CSS in JS, Styled Components, Swift, and Android. Read more about code languages.