Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP


Authoring tool discussion #5

iangilman opened this Issue · 71 comments

30 participants

Ian Gilman Bartek Szopka Ido Green Diwank Singh Tomer Edward Hinkle edumerco laubsauger Zbyszek Tenerowicz Paul Irish yamazaki daisuke Harish Sivaramakrishnan Taylor Dewey Jan-Christoph Borchardt Matt Crinklaw-Vogt volca Godwin Lukas Nemec Nico Williams Arthur Zaczek Ali Vakilzade Georgios Kokosioulis Valentin Kirilov ahaeberle Perry Butler and others
Ian Gilman

I love it!

Perhaps out of the scope of this library, but I figured I'd file it here nonetheless: in order for this to be useful for more than a few people, you need some sort of authoring tool for these kinds of presentations, such as what Prezi has, or my own Infinite Canvas tool from several years ago:

Any plans to do something like that, or are you leaving it to the community?

Bartek Szopka

impress.js just started as an experiment and my personal tool for creating presentations and I really wasn't expecting all the buzz around it. So at this point it's kind of authors responsibility to build the presentation content and styles in HTML+CSS.

Anyway, it's very true that it's a little bit painful and requires quite a lot of time to create such a presentation now. Regular web development tools such as Web Inspector in Chrome (or Firebug in Firefox) are helpful but it's hard to call it 'editor'.
And it is true that more and more people are asking for edit tool.

My answer at this point would be that I understand the need - even myself, as I'm probably the one that is using it the most right now ;) but I don't really have plans (not enough free time) to build such a tool.

Ido Green

+1 to iangilman.
I'll try to find some time to do something in this area :) It sounds like a good idea that will let many more people enjoy this cool js lib.

Ian Gilman

@greenido awesome! I'd love to see what you come up with, and I may be interested in helping out (if I can find the time).

Diwank Singh Tomer

@greenido You can count me in too!
Let me know if you are serious and need a hand (with coding, testing, documentation, whatever.)

This is me @creatorrr !

Edward Hinkle

Hi guys, if you could keep me in the loop with what you are all doing, I will most likely be starting down the path of creating an authoring tool as well. People in my agency have been wanting to start using Prezi this year, but with flash and such we have a lot of restrictions. Impress.js is exactly what they needed, but none of them are coders, so I'll be working on an authoring tool for them.

I'd be happy to collaborate with any of you that are interested.


Does could work?
It is aldeady being used in Sozi (

Congratulations for Impress, great work. :)


Diwank Singh Tomer

@EddieHinkle It'd be great! Could you ask others as well?
Let's put together a framework and start working.

@bartaz Any ideas? Plans for any API?

I'm in, by the way. :-)

Ian Gilman

@edumerco I think ideally the creation tool would itself be a web app, rather than a native app like Inkscape.

Thanks for the link to Sozi, though… great to see so many people exploring zooming presentations!


Hi there,

I just found this neat little experiment yesterday and started to think about something like on instant.
Since this would make this lib useful to people who have little to no javascript/html/css knowledge but still want to build 3D Zoom Presentations.

And since this is already aimed at browsers that implement modern html5 techs, you can provide those offline options with ease while working with a webapp ( )

Just forked and started to work out a concept in my head

Bartek Szopka

Hey guys. That's great that you have such enthusiasm to build authoring tool.

Just few things to keep in mind.

First of all, impress.js is just a library that takes handles positioning and transitions between the slides. The markup is just HTML (with some predefined structure) and the styles are pure CSS, they are not connected to impress.js in any way. As I see it now, everyone who uses impress.js just copies style.css from demo. It shouldn't happen, CSS should be prepared for a presentation to suit the content. So it will be a great challenge to create authoring tool that will handle creation of HTML content and custom CSS styling.

Second thing. It's a very early release. It doesn't have any number, but it's like 0.1 alpha codename "not finished yet", you know ;) I don't know if it will happen, but there may be some significant changes (for example to HTML structure), and probably some public JavaScript API will be available at some point (to allow triggering transitions to chosen slides).
Keep that in mind, please, and watch for the changes in repo.
I will probably start giving some version numbers soon, so you will know with which version you are working, etc.

Keep me posted if there is anything you need in terms of understanding how impress.js works or in terms of stuff you'd need in API.


Hi Bartaz,

that is exactly what i expected. I will focus on positioning for now since those attributes can't change to much i guess.

For positioning:
I'm thinking of some type of grid where you can snap those slides in the 3D space plus a rotation/skewing system similar to most 3d modelling applications - working with arrows that can be dragged on the respective axis.

And yup, version numbers would help :)

Bartek Szopka

So it seems quite close to my "vision" of edit tool for impress.js, nice :)

You will probably need some API method to move the "camera", right now it only automatically positions itself to show specific presentation step in the center of the screen with correct scale.


A camera method would be needed thats true.

But it will also be just awesome.
I imagine roaming through the space (and time) continium that embraces your presentation: picking stuff, dropping it somewhere else, one click will get you in edit mode for a respective slide letting you edit contents and stylings inline - prezi will be so 2011 :)

Ido Green

Very cool guys!
I'm now traveling for the next 2-3 weeks but after that - I hope to kickstart this project :)

Bartek Szopka

I'm closing this issue, as it doesn't affect my codebase at this moment.

But feel free to use it as a forum for authoring discussion ;)

Bartek Szopka bartaz closed this

I've made the first steps towards this. It is more or less a clumsy interface sketch - no real functionality besides crappy html source export. I will mainly wait for one or another api goodie to emerge but feel free to get motivated or inspired :D

Diwank Singh Tomer

@laubsauger Impressive work!
Though, you are right about the API bit. As @bartaz said earlier - this is sort of an alpha release as of now and we should rather wait for an API to come through.

+1 for the great job anyway! :)

Zbyszek Tenerowicz

Hi. I just found this thread and it looks like I have a different idea about editing impress.js presentations.
IMHO the most important problem is setting x, y, rotate and scale in html and refreshing it all the time. It would be better to do it in a WYSIWYG manner..

I hacked a quick a proof of concept in a fork of mine. See
You can take a look over here: (but it's not staying there forever)


Yup thats nice.
With a little doodad to drag on for rotation, moving etc. this will do it :)
I got the GUI sketch ready for that and will implement it asap if i have time on my hands

Bartek Szopka


I created new issue about impress.js API for authoring #88. If you have any suggestions about what may be useful to have there, please join the discussion there.

Bartek Szopka bartaz reopened this
Bartek Szopka

Let's keep it open to encourage discussion.


Oh boy! That is freakin' awesone. The interface looks really promising despite a few hicks here and there.
The adobe guy did a bunch of nice work there :D

I'm so glad that i could not free up time to work further on the Editor idea since this would've blasted it

Zbyszek Tenerowicz

Ok, this encouraged me to finally fix up and push the first prototype of my idea of WYSIWYG interaction. You can take a look, it's there:

I recommend trying it on the overview slide (start with pressing the left arrow) ;)
It just works, drag the letters M[move] R[rotate] S[scale]
It should still be uncomfortable to use, but that's life :)

Bartek Szopka

I'm too lazy to pull and check ;)

@naugtur Can you host it somewhere? Creating a gh-pages branch should be enough for a static demo.

Zbyszek Tenerowicz

Ok, it deployed.

Usage tip: Hover a slide, a control shows, M just drags, dragging R horizontally rotates, dragging S vertically scales.

I dropped it here:

The overview is linked on purpose - moving elements works properly in overview and doesn't scale back on slides, but I already know how to fix that

Bartek Szopka

@naugtur That's an interesting UI concept. Not very intuitive at the beginning (clickinig on letters and dragging), but quite simple. But it will get a little bit compicated if you add positioning on Z and 3D rotations

Zbyszek Tenerowicz
Paul Irish

just FYI..

This is from a japanese developer but is also an authoring tool for impress:


Right now it's not very polished, but the author is happy to iterate on it if anyone has ideas.

yamazaki daisuke

Hi. Yesterday, I uploaded a version of English.

Will be further upgraded.

Harish Sivaramakrishnan

@bartaz Thanks for posting the link to impressionist.

Guys, Impressionist is now on github and I am also looking for some help testing this out. Please do take a look and log issues.


Ido Green
Taylor Dewey

Not really a full on

Taylor Dewey

Crud... Not really a full on editor, but I had some initial thoughts about a WordPress plugin with a GUI for positioning and sorting slides. Able to pull in content from posts, pages, or custom slides. Etc. I'll post to github when I have anything. All of the above ideas are way more impressive tho :)

Jan-Christoph Borchardt

Wow, Impressionist is really good!

I was going to suggest adapting this editor, which is based on SVG-Edit and currently uses Sozi as backend (impress.js and dizzy.js are on the plan). But Impressionist is already far ahead.

Bartek Szopka bartaz referenced this issue

Impress js "gui" #148

Bartek Szopka

Another possibility mentioned by @lunemec in #148

I got bored one afternoon so I created a little app that should allow users without HTML/CSS knowledge to use impress.js just by simply creating slides and assigning coordinates to them, check it out


any new ideas are welcome

Matt Crinklaw-Vogt

Hey, I recently started working on Strut (an ImpressJS GUI)
live demo:

Its currently in alpha so there are some kinks. Contributions are welcome.

screen shot 2013-05-25 at 1 42 31 pm

Bartek Szopka

@tantaman nice! and surprisingly similar to by @hsivaramx ;)

Maybe you guys should join your attempts?


I working on Mimpress recently,an impress.js editor for iPad.

Bartek Szopka

@volca looks nice, too bad it's paid ;)


@bartaz You can try it with promo code "JPPYE7HX7F49" :)

Matt Crinklaw-Vogt

@bartaz yeah, I actually found impressionist a few days ago as well. I asked them about working together last night (no response yet) but their code looks pretty difficult to maintain and extend.

Bartek Szopka

@tantaman I'm quite surprised you haven't seen it before as both strut and impressionist have very similar UI :)

Matt Crinklaw-Vogt

@bartaz Went ahead an added a note about Impressionist to Strut's readme.

Zbyszek Tenerowicz

I had time to get back to builder4impress at last.
Working prototype: [works best in chrome]

@bartaz I have added some functions to the API.


I would like to use one of your tools to create and export presentations. But, unfortunately, I'm having trouble saving and exporting presentations on any of the tools listed above. I'm able to create and preview in strut but unable to export the files to use on my website. Also, I don't see any option to change the vanvas size in any of the tools. I liked the strut tool but its bad that I cant use what I create out of it. Impressionist is unable to even display preview on chrome (Windows). Builder4impress was very good to export the animations but I am unable to change the canvas size.
Please provide a tool that is usable by non-programmers.

Lukas Nemec

Hi, I've tried it with mine tool .. .. click on show presentation when you finish it and then save the page in FF or chrome or wherever save page as ... some name and save it as complete web page to some folder

it will create myname.html and folder myname .. and you need both copied somewhere (flash, cd ..) and then you can run the presentation off-line by opening myname.html in FF or chrome, IE will not work I think



Thank you lunemec but it's more complicated to use compared to writing the tags based on impress.js documentation. I was looking for a tool to make very large number of presentations using impress.js quickly instead of creating div's one by one manually.

Matt Crinklaw-Vogt

After you preview your presentation in Strut use your browser's "save page as" feature to save the presentation as a stand alone website. tantaman/Strut#53

Hope that helps! Let me know if you have any trouble or need anything else.

Edit: there is also now a "zip presentation" option which will export the presentation to its HTML, CSS and JS source and give you a zip to download. Currently, zip presentation only works if you are accessing a hosted version of Strut or have "--allow-file-access-from-files" enabled in Chrome.

Nico Williams

The S9 impress.js template is perfect. You get to use markdown, so any $EDITOR will do. I tried using wkhtmltopdf to export to PDF but the result is lame (e.g., directives for canvas positioning are displayed).

On iOS there's Mimpress, which looks like basically S9 with the impress.js template, a webkit browser, a simple text editor, and a simple tool for selecting translations, rotations, ... per-slide. The nice thing about Mimpress is that, well, tablets. The idea is nice enough that equivalents for Android should be possible (if not already there) and that would be nice because, well, tablets. Being able to author on a tablet is key. Strut and Impressionist didn't work very well for me on my ipad, so for now for me it's S9 + impress.js, and on the ipad: Mimpress (on the theory that the two approaches are mostly compatible).

@volca: some issues with Mimpress: there's no way to manage svg files, and image file mgmt is a bit wonky, as is the CSS style mgmt (I can't share it easily, which I need to do if I'm going to use S9 on my desktop and mimpress on my ipad). There's no nice share with e-mail or whatever, just copy to clipboard (which, ok, is not terrible, but still). Also, Mimpress isn't rendering lists properly... It crashes when displaying the whole canvas if the presentation uses your svg file.

Also, there's no export function in Mimpress. An export to HTML option would be nice, and obviously shouldn't be too hard (given that you are probably already using S9), but as long as I can send the markdown to my desktop I can pass it to slideshow there (I've not tried it though, and I worry that there might be incompatibilities). An export to PDF would be lovely, but since you'd likely need an HTML->PDF renderer, and I bet there's none good enough for this (but I've not searched far and wide enough).

Thanks to @bartaz for this incredible tool (impress.js)! I love it!

Arthur Zaczek


Great tool! Thank you.

I've a lot of Powerpoint slides and so i've created a small powershell script to migrate them to impress.js. It's a starting point, it will not be a full featured converter. But it saves your text :-)

Regards, Arthur

Matt Crinklaw-Vogt

@arthurzaczek dude that is pretty cool... Do you mind if I add that as a way to import Powerpoint presentations to Strut?

Arthur Zaczek

Hi! Thanks for feedback. It's GPL licensed. I don't know if it's GNU Affero General Public License compatible, but feel free to use it - I don't believe that there is so much "innovation" to worry about a license ;-)

Georgios Kokosioulis

Hi there,

firstly, thank you Bartaz for this impressive framework! I started creating my own visual editor for impress.js and ended up customizing and extending the builder4impress by @naugtur who has done a really great work.

I liked how this tool handles the slides so I decided to add more features in it. It's still in under heavy development (this means quite a few bugs and messy code) and regarding the fact that I am not an expert in Javascript maybe some of you are interested in that and you would like to contribute.

The main goal of this tool is to be a tool for the ASQ project. (more details on About page)

Take a look at the editor and please be indulgent. :)

Zbyszek Tenerowicz

@giokokos, feel free to submit a pull request or contact me directly if you want to cooperate in any way. I slowed down my work on the editor mostly because there was no demand anymore and Strut got so popular. I still want to work on a fully-wysiwyg editor and I have some plans regarding going 3D. It's just not a high-priority project for me.

Valentin Kirilov

Last year I saw impress.js library and I was amazed. A few months later I decided to make an authoring tool and now I am ready to show it, because I have to know what is the opinion of the users and should I continue to develop it.

It's completely free and is available on The module for creating presentations is JavaScript based, but the project contains server side which stores the users presentations and they can access them from every computer.

There are two presentations made with JSpres. The first one is just promo of the project, and the second is the presentation which imagined the project on the National IT olimpics in my country (this is the reason that is not in english, but you have to see the transitions :P)

So if anyone want to see and try it but have some troubles I wrote a simple guide that will help you to understand the basics and can be found here:

So I will put some screens to provoke a little curiosity in you to see the project. I would be grateful to hear your feedback, advice, criticism and I hope to help someone with what I've done.


after a colleague told me about impress.js I catched fire for this tool - so thank you in the first place.
I was and am still looking for an authoring tool or a helper to put the data in. I read of many interesting aproaches and I do understand, that it is not very easy do design such a gui.

to @valkirilov and the others who consindering to test the software JSpres:
First impression looks good.
BUT reconsinder, that HTML and CSS is there for a reason to seperate style from content.
And that is one of the basic principles of impres.js!
I know it seams easier to put it all together and hey the computer parses it anyway. BUT that's why the other presentation tool did mess up in the first place.

Me for myself and I think many of the impress.js-users do not look for just another powerpoint like tool with astonishing 3D anmiation and better concepts - that would be keynote in my opinion.
We are looking for a presentation-tool that is able to deliver content in a new way and with the right basic asumptions - so keept the content clearly seperated from code and do not repeat every style for every lable - if you still wondering what I am talking about a short glimpse in the JSON export from JSpres:

<div style=\"text-align: center;\"><b style=\"font-size: 64pt; font-family: Tahoma; line-height: 72pt;\">agile manifesto</b></div>","fontFamily":"
Perry Butler

I would like to refer my recent comment from #88 to this thread for discussion. Thanks!


Hi, I found it hard to prepare slides and then edit them one by one to position them on the canvas. Typical scenario: I changed the size of a title tag in the first slide, which made it necessary to move up or down all following slides, or slides related.

This process is somewhat simplified using existing impress.js "editors", but I found they mess up the html with un-needed tags.

Therefore, I created a simple php script that modifies the impress.js attributes with a simple command. I was wondering if this can be shared, and if so where would be a nice place to put it. Ideally, it could be translated into a browser extension, but I don't know js enough. I would be happy to contribute if anyone started up a project. In the meanwhile I am happy to share my script, if there is any interest. Any suggestion on where/how appreciated

Here are typical usages, to give you an idea of what the script accomplishes.

php impressmod.php --f input.html
list available slides and their id, if present
php impressmod.php --f input.html --steps 3-5 --x -20 --y =200
decrease data-x by 20 and set data-y to 200 on slides 3,4,5 of input.html
and overwrite the file
php impressmod.php --f input.html --output output.html --steps 2,3,8-9 --x d20 --fm
increase the data-x gap between slides 2 and 3, 3 and 8, and

8 and 9 by 20. Slides 2 remains unchanged. Data-x will be set
wherever missing
php impressmod.php --f input.html --steps 5-2,overview,8
process slides in the following order: 5,4,3,2,[id=overview],5,4


out there are plenty of editors :)
but, I had a small project concept, and I tried to create a small code snippet for a basic editing feature.

When someone is interested in it:

it's working on desktop as well on touch device.

(only one issue, that can't solve is use it or only impress.js in iframe on touch device like ipad with ios7. Browser crash every time)

Stefano Zaghi

Yet another editor supporting impress.js, but designed for scientific contents:

Matt Newbill

Is it possible to embed a presentation inside a static html page?

Perry Butler is using impress.js with a fully custom WYSIWYG authoring tool. I've attributed the library to Bartaz on the About page. We really like impress.js!

MattNewbill: Yes it is. You'll need a modern web browser with Javascript to run it nicely.

Matt Newbill

I am having problems with the overflow eating up the rest of the page. Is there an example somewhere or do you have any advice on how to embed it?


@perrybutler I like the potential of your authoring tool - more for stories than slideshows, seems like it could become cool.. is it possible to add links etc through the UI yet?

Perry Butler

@dcsan I really wanted to implement hyperlinks and images sooner, but we couldn't make it happen within our grant budget, so I'll be working on it in my spare time. In fact, C&C supports any arbitrary HTML for the scenarios (we have a sample story that actually loads a Prezi INTO a C&C slide/scenario), it's just that we haven't provided the tools yet to do it from the front end. It can only be done thru CSV right now, which is a transitional format we've decided to use for loading in sample stories before implementing a relational database which might not even be necessary.

I'm definitely going to be adding those features though, as this is an app I want to use myself. I truly believe that if we are aiming to get more users on-board, we will need to add the features which are typical to most slideshow building apps in order to make it all around more useful for more types of people. As of right now, you can link slides (scenarios) together without writing any code by adding buttons to scenarios and editing those buttons to point them to other scenarios. You can also edit the title and body text, but again this is just plain text and I'm looking forward to including more components, templates and formatting options in the future.

If you load the sample story "Example 7.1" it offers a good representation of our initial direction - laying out the story in a flow tree with ability to link new scenarios or edit existing ones on the fly, or switch to reading mode on the fly. There is no compile time, the edit and reading modes are unified, what you edit/read is what everyone gets. :)

Another bonus is that Choices & Chances works offline, saving drafts/changes regularly when a connection is available, similar to Google Docs. I engineered most of these things before I had a chance to learn Meteor/Angular/React/etc, and before Prezi announced their HTML5 version (I saw them hiring for an HTML5 guy so I knew it was coming). The freedom of not using a library was rewarding. The challenge comes with having to do nearly everything in Javascript, since we try to maintain roughly 90% functionality while offline and can't rely on the server for most things.

I've taken inspiration from software of which I enjoyed the UI/UX, such as the File, View, Edit menus similar to Windows/Mac, the ability to re-arrange these menus (they used to be panels that you can keep open like in Photoshop, but we've simplified it for the time being), a Properties panel for the selected object with ability to edit many of its properties similar to Photoshop or 3D Max, multiple display options for accessibility or preference similar to Windows, flat-UI similar to modern trends, OAuth2 for login, a general full-screen "video game" or "couch" or "conference room" approach, etc...

Thanks for your interest, it's not often that I get to share this kind of detailed information since the stuff I do is fairly obscure.


hi @perrybutler thanks for the detailed reply.
i'm sure you've seen and the visual editor
i really like how the non-linear editor figures out the links from wiki-like (GFM) content, and visualizes the story flow

from just this:

they map this

if you implemented server in meteor you'd get JSON datastore pretty trivially which is probably a better format than your CSV. as well as instant synced updates for anyone else watching, FB login etc.

we had a discussion about creating impress type animations with Famous on the meteor-talk list which is another approach.

is there a repo for your app anywhere? i'm interested to discuss more but its maybe a bit OT here? my email is in my profile. I'm actually working on something similar.

Perry Butler

@dcsan I've actually never seen Twinery. Makes me wonder if it was around during the time I had been researching Prezi-like web apps. It looks pretty much like what we're doing with C&C. The best I could find at the time was MindMeister, Prezi, Sozi, and the various impress.js authoring tools in the discussions here on Github. JSpres is gone, I liked that one. While Strut delivers a UX reminiscent of PowerPoint, it just doesn't innovate.

Anyway, the C&C repo is privately hosted at BitBucket, but we may move it over to Github for open contribution. Discussion is valuable to the project, so I went ahead and created the Github repo here as a starting point. Discuss all you want!

In your first screenshot showing how Twinery maps text, that's essentially what our CSV achieves. The CSV format is what allowed our non-technical team member(s) to produce stories in a text editor before the app was ever functional. They would have had a difficult time writing stories in raw JSON, so a rudimentary story format was one of the first things we designed. Our CSV could use some refinement to bring it more in line with a Wiki-like syntax. We haven't revisited the syntax yet, but it's on the list. It was planned to dump the CSV files altogether once we built the authoring tools into the front end.

Real-time story collaboration was another thing that was in the plan, but didn't make the cut. Meteor is cool, I like what they're going for. I've recently taken on a massive overview of Meteor-like frameworks which has yielded a lot of insights and new ideas. I'd like to finish and implement Rapid.js into C&C, and while it does work for the other "top secret" project I'm developing around it, it's still a work in progress so Meteor isn't totally out of the question. Rapid.js lets you declare and use components as well as JSON data straight in your HTML template e.g.:

[each {Games}]<div>{Title}</div>[/each]

...would output a list of Game titles. I'm still experimenting with it too.

You might find it interesting (or scary) to know how much under the hood is first-class, custom functionality. The flowtree algorithm was developed from scratch, it's not a Rhinegold-Tilford or something you would find in D3.js. Still a few kinks to iron out with it though. No jquery-ui for the drag-drop since I wanted the edit/view modes unified with 3D editing capability and realistic positioning of the scenarios. We're using this OAuth2 component for social login, also developed by yours truly, so we have Login with Google/Facebook/etc.

Hope to hear from you at the Github repo.

Ila Gokarn

We tried to take a different spin on Impress and created the Impressify editor as a component to an e-learning platform. We used Impressionist (beta) by @harish-io as a starting point. We threw in features like timer constraints for each slide, pop quizzes and MS Powerpoint upload as images after some back-end processing. Our clients love it! Thanks for the amazing library @bartaz :)

Here's a screenshot screenshot

Would love to hear comments and suggestions :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.