Create Instructables in the New Editor

Here at Instructables HQ, we're always looking for new ways to make it easier than ever to share the things that you've made.  Today we are very excited to announce the first public beta release of the new Instructables editor!  The new editor allows you to create, edit, and publish Instructables.  You can even use it to make changes to Instructables that you've already started or published.

Some of the new features include:

Drag and drop interface  - add, remove, and reorder photos and steps, all with drag and drop. (those of you who are already familiar with the Instructables iOS and Android mobile apps will love this feature)
View All Steps - the landing page of the new editor gives you an overview of all the steps and images in your Instructable
Continuous Editing Experience - edit, upload, save, preview, and publish... all without a single page reload
New Uploader - rotate images and see the status of your upload
Easy Embed - embed video and media from a variety of sites
Pixlr Image Editing - crop and retouch uploaded images in just a few clicks with Pixlr photo editor integration
Easy Preview - preview your Instructable without ever leaving the editor
Cover Image Selector - select and crop your Instructable's cover image, so it looks great on the site and on your phone
New Publish Page - add keywords, select a category and channel, and enter your Instructable in contests, now in a clean, new interface

So poke around, edit, and publish, and let us know what you think.  Please leave any comments, questions, or feature requests in the comments below.  Definitely let us know if there are any bugs we still need to work out!

How do I find the New Editor?

To create a new Instructable from scratch, follow this link:


To edit a draft or published Instructable (note: you can only edit Step by Step Instructables in the new editor, you will be redirected if you try to edit photo or video instructables):

1.  Login and navigate to one of your drafts in the current editor (Go to http://www.instructables.com/you?show=UNPUBLISHED and click the edit link next to any of your drafts).
2.  Click the big orange button at the top of the page that says "Try the New Editor".  You will get redirected to the new editor, with all your Instructable's data loaded and ready to go.  The url looks like this:


sort by: active | newest | oldest
Phil B4 months ago

I composed an Instructable on an iPad II using the New Editor, but key parts of it were missing when it was uploaded, including the whole Introduction. Finally, I replicated what was missing on my laptop and copied over what was as intended to a new Instructable. Then I deleted the flawed Instructable and published the corrected Instructable as if it were a new Instructable. This is a puzzle because I composed and successfully published another Instructable on my iPad a few weeks ago.

Also, there should be a channel for Shooting under the Outdoors section. There is a section for weapons, but not real guns and there is a section for paintball.

Kiteman Phil B4 months ago

Other people have mentioned similar issues - I think it would be worth posting this as a fresh bug report.

Phil B Kiteman4 months ago
Thank you.
d0vr5 months ago

How can I get to, I guess a standalone preview of a draft instructable - preferably one with a link I could send to others for ideas/grammar checking before publishing?

antoniraj d0vr5 months ago

You can enable "Collaboration" and add your friends or any member you wish to edit the instructable for ideas or grammar checking.

To enable Collaboration,

1. Click on your drafts and click edit on the instructable you want collaboration

2. Click on the down-pointed arrow on the radio buttons on top, which will bring you a drop down menu. (When you move your mouse pointer over it, it says edit)

3. The top most item on the drop down menu is collaborate. Click on that which will bring you a box saying "Enable Collaboration"

4. Click "Enable collaboration" and add your friends who can be able to view and edit your instructable

Please refer to screenshots attached if you have any doubts


Click on your drafts in your instructables tab.

Screen Shot 2015-06-17 at 1.13.21 PM.png

One question: When I try to PUBLISH my instructable, the error "Missing Key words. Add key words". pops up. When I add key words, the same message keeps coming back. How do I convince the program that I've actually added the keywords?

Feel free to private-message me directly if you have issues. You'll need to hit "enter" or "," after each keyword to submit it. Each added keyword should appear with a colored background, see the attached screenshot. Is this what you're seeing?

Screen Shot 2015-04-21 at 12.09.22 PM.png
diy_bloke9 months ago

Inserting code is still a gods-end

joeismydad11 months ago

How do you save notes onto the images? Also, how do you resize the note box thing? I can add the notes and delete them, but I can't save them (save button won't work) or resize the white box...

I like it, but it would be really cool if the setup were similar to the Weebly site editor, where you can drag and drop ALL components into place per page (or in this case, per step). You can add text boxes, photos, embed code, add videos, documents, sound clips, etc... I realize this would require a LOT of coding, so it's just a suggestion.

I'm unable to find the HTML editor button in the new editor. I think it was there a few months ago but can't find it any longer. Working with formatting options(code/quote) without HTML editing option is really hard.

pro users can edit source code

Doh! It slipped my mind that my pro membership expired a few days back. <facepalm>

I am liking the new editor, it's very easy to use and navigate, especially for someone like me, who just joined as a Pro member, very nice.

JM19991 year ago

The new editor is cool

Hey I like it nice job on fixing the preview! I can't seem to reorder or delete embedded videos. every time I click on them it just starts playing the video. I have to go into the old editor to reorder them and delete them. That would be great to be fixed!

Also the copy as HTML in the arduino program no longer does anything in the new editor and finally. . .

I use this little handy box to put my code in. Because my code can be pages long I need to contain it, so I put it in this box that has a scroll bar. That way I can still post the code in my i'ble without having to have a pages full of code taking up room. What I used to post is


Now if you made a button that would automatically do this that would be great!
Link and unlink nested under the 'link' button gets difficult when posting many links.

So just the embedding videos problem (can't reorder, delete), and the area for code. The link thingy is just a suggestion to make things faster.

Otherwise I love the new editor! Good job!
Oops it actually did the box thingy. Here It's

I just used the new editor, and I really like it. i loved the layout, the easier drag and drop photos from library to instructable, and the positioning of the main image option. However, I did run into two issues. First, when I was uploading images by dragging them from the folder to the proper location (which I love, by the way), I had a lot there and this made it rather laggy. Not my computer so much, but rather that I couldn't scroll properly due to lag issues. After uploading, I began to type, and that was when I noticed the "Saving" image pop up every few seconds. It was out of the way and everything, so I now this sounds nit-picky, but it was slightly distracting. Perhaps some grey text that would state when it was last saved would be better?
Anyway, I enjoyed the new editor, despite my little complaints. It is very well made, and I think I will be using it from now on, so thanks for making it!
FoamboardRC2 years ago
What's happening to the source! When I tried posting my Arduino code, it took away all the color and everything!

You know how in the IDE you can click "Copy for HTML". Well when I paste it in the new editor is messes it up.
amandaghassaei (author)  FoamboardRC2 years ago
you have color tags in your Arduino code? I'll try this out. Thanks for reporting!
Yes I do. Also there's the little thing I used to use.


That would put a little gray box on the screen with a scroll bar. I could paste my code inside of it and it would contain my code into a small area (631x700).
You can see what I'm talking about if you scroll down to the bottom of my i'ble. There are gray code boxes everywhere

Now it just puts a bunch of code and won't put in the boxes.

So, that and the color tags with the Arduino.
FoamboardRC2 years ago
Love the new adjust the cover image! Zoom would be nice-

I like everything with the new editor except for the preview window- I think the window should be the size of the browser window. The new preview window's height is too small and I can't, 'Stand back and look over all my work with satisfaction'. Especially pictures you have to scroll to see the whole thing.

Well that's my input!
amandaghassaei (author)  FoamboardRC2 years ago
so it's the height of the window that's the problem?
Yup. I can't even see on picture without scrolling. It would be nice if the popup window filled the whole browser window, with the X button a still in the top.
FoamboardRC2 years ago
Why combine the link button into one button? Instead of being able to click on the link button and paste, you have to click on the menu first then select link.
amandaghassaei (author)  FoamboardRC2 years ago
after using it a bit, I think I agree with you, but at the same time we're trying not to make that top menu too cluttered. I'll see what we can do
Thanks for considering it!
antoniraj2 years ago
The new editor is great.. Love the idea of uploading all the pictures, then dragging them into steps. But I was unable to get back to edit after full preview
amandaghassaei (author)  antoniraj2 years ago
you opened the preview popup and then couldn't exit?
thanks, I found out how to get back... will take some time to learn to create in the new editor
actually, the pop-up window covered my entire screen.. now I figured out to click on the visible edges of the edit window
Deeg2 years ago
Some minor points (I've barely used it). 
  1. The mouse-over preview picture could be bigger.
  2. Re-position the mouse-over preview picture so it's not right on top of the original.  I was looking over the pictures to make sure they are in the correct order and the preview covers the next picture which means I have to move the mouse, wait for the preview to drop, then move the mouse again.  It also makes repositioning a picture a bit tricky because you have to do it before the preview pops up.
Deeg Deeg2 years ago
Some more thoughts:
  • The bigger thumbnails are great and fix all the issues I mentioned above.  Thanks!
  • It would be nice to have more HTML controls in the editor, like tables.  Currently I have to edit the source HTML if I want to use tables in my text.  Ugh.  I have never used the Styles or Format options.
  • I find the image viewer (?) at the top awkward.  I can't figure out what images it is showing at the top (the last ones I inserted?).  My instructable has 30+ images but only two are shown at the top.  I can supply a screen shot if wanted.  Some of the confusion may be because I've used the old and new editor on the same Instructable.
  • Another vote for the "Image Tags" drop-down to be alphabetized and remembered.  Highly annoying to have to select it again and again.
  • It would be nice to have a way to see the full-sized picture in the image library.
  • The full preview is cool and helpful.
  • What are the hot-keys for the editor?  E.g. ctrl-B bolds the selected text.  Can the mouse-over include the hot-key (if there is one)?
  • Probably not what the engineers want to hear but I don't find the new editor appreciably easier to use than the old one except for the Full Preview.

I do all my editing in Firefox (rarely on Chrome) on a desktop or laptop with all three major OSs (Win, Linux, OS/X).
amandaghassaei (author)  Deeg2 years ago
hotkeys: ctrl+S will save, option+drag will copy an image
amandaghassaei (author)  Deeg2 years ago
thanks for that input!
Amanda, it looks like I can't add notes to pictures. To recreate:
  1. Edit an Instructable page (duh).
  2. Click on thumbnail for image.  This brings up the full-size picture.
  3. Click "Add Note".  The empty note appears in the upper left.
  4. However, I can't click on the note to move it or add text.
This is on Windows with Firefox 10.0.1.
Deeg Deeg2 years ago
I should probably write these down and put them all in one big post but that would require me being organized.

In Full Preview mode the embedded links don't work. They look like links but nothing happens when I click on them.
amandaghassaei (author)  Deeg2 years ago
yes, we could have these links open in a new tab in preview mode. I'll add that to the list.
amandaghassaei (author)  Deeg2 years ago
yeah, I've seen this in firefox too, we'll get that fixed asap. for now, try chrome.
amandaghassaei (author)  Deeg2 years ago
I realized I never addressed your question - the images in the top tray are not attached to any steps. They're images that you uploaded on an Instructable, but have not yet dragged to a step. Hope that helps!
makendo2 years ago
I can't make the html editor work (Win, Chrome) - it deletes my edits and moves the cursor to the end of the text after a few characters.
amandaghassaei (author)  makendo2 years ago
yes I've been having some trouble with this too, the 3rd party text editor we are using seems to have some buggy auto-save functionality in source-editing, we're working to fix it asap!
makendo2 years ago
I like it. Image uploading in particular is much improved (faster, easier, more intuitive), and I like the option to edit in Pixlr, which works flawlessly for me so far (I'd particularly value the option of *combining* photos in Pixlr, but one step at a time!). I still wrestle with the default photo layout, and a thumbnail preview of how the photos are going to appear would be good. I did have to search for how to do some things, but not for long, and I think you've done a great job of making it feel familiar and yet bump up the functionality a lot. Kudos.
amandaghassaei (author)  makendo2 years ago
FoamboardRC2 years ago
Good job on the new editor! I love it and it is very easy to navigate! But I though I'd just let you know that on a Mac using Firefox/Chrome that the 'add note' button adds a note but I can't move it, resize it, or edit the note!

It does work in Safari though.
amandaghassaei (author)  FoamboardRC2 years ago
thanks for the input, we will be releasing a fix for this soon. Please let us know if you find anything else!
ewilhelm2 years ago
There is now a big orange button on the default editor so you can easily try the new editor.
caitlinsdad2 years ago
Just a few things to mention while trying the new editor:

Image tags are not sorted in any order in the drop down list. Would probably annoy Kiteman who has a bazillion images uploaded. It does sort and scroll through pretty fast though.

When you want to add the images selected from your library, you have to press button that says "upload" - they are uploaded already.

Images pulled from the "selected area" can only be used once. You need to upload again or add to that queue from the library to reuse the image in another step.

I found you had to use the embed button on the top menu to embed a video, and then you only need to grab the URL and not the embed iframe stuff from youtube. Embed video button no longer in with the text formatting tools, not sure what to do with the frame button.

I guess the special container button is used to mark an area to list computer code so it will format correctly?

Probably more things to note once I use the new editor for a real ible.

Good observation.. will try the new editor in my next instructable
and exposing the list of embeddable sites on the embed URL may be informative but half of those sites would be reposting questionable content or SPAM.

(5,381 images, actually...)