Instructables

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:

http://www.instructables.com/editInstructable

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:

http://www.instructables.com/editInstructable/edit/XXXXXXXXXXXXXXX

Picture of Create Instructables in the New Editor
Screen Shot 2013-09-16 at 3.33.09 PM.png
Screen Shot 2013-09-16 at 3.32.50 PM.png
Screen Shot 2013-09-16 at 3.35.11 PM.png
Screen Shot 2013-09-16 at 3.37.33 PM.png
Screen Shot 2013-09-16 at 3.37.16 PM.png
Screen Shot 2013-09-16 at 3.42.16 PM.png
Screen Shot 2013-09-16 at 3.42.05 PM.png

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.

amandaghassaei (author)  Antzy Carmasaic29 days ago
pro users can edit source code

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

m1a2x1 month ago

<a href="http://www.zachemdrug.ru">Zachemdrug</a>

WhitneySegura4 months ago

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.

JM19995 months ago

The new editor is cool

FoamboardRC6 months ago
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!
FoamboardRC8 months 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)  FoamboardRC8 months 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
http://www.instructables.com/id/DIY-Arduino-Unit-Converter-How-to-use-LCD/

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

So, that and the color tags with the Arduino.
Thanks!
FoamboardRC8 months 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)  FoamboardRC8 months 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.
FoamboardRC8 months 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)  FoamboardRC8 months 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!
antoniraj8 months 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)  antoniraj8 months 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
Deeg9 months 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 Deeg9 months 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)  Deeg8 months ago
hotkeys: ctrl+S will save, option+drag will copy an image
amandaghassaei (author)  Deeg8 months 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 Deeg8 months 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)  Deeg8 months ago
yes, we could have these links open in a new tab in preview mode. I'll add that to the list.
amandaghassaei (author)  Deeg8 months ago
yeah, I've seen this in firefox too, we'll get that fixed asap. for now, try chrome.
amandaghassaei (author)  Deeg8 months 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!
makendo8 months 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)  makendo8 months 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!
makendo8 months 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)  makendo8 months ago
thanks!
FoamboardRC8 months 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)  FoamboardRC8 months ago
thanks for the input, we will be releasing a fix for this soon. Please let us know if you find anything else!
ewilhelm8 months ago
There is now a big orange button on the default editor so you can easily try the new editor.
caitlinsdad10 months 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.
+1

(5,381 images, actually...)
Pro

Get More Out of Instructables

Already have an Account?

close

PDF Downloads
As a Pro member, you will gain access to download any Instructable in the PDF format. You also have the ability to customize your PDF download.

Upgrade to Pro today!