Skip to content
This repository

Authoring tool discussion #5

iangilman opened this Issue · 62 comments

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.


@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. :-)


@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
bartaz commented

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
bartaz commented

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

Maybe you guys should join your attempts?

volca commented

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

Bartek Szopka
bartaz commented

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

volca commented

@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
bartaz commented

@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
naugtur commented

@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)

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.