Prezi HTML5 Editor via impress.js [closed]

Question

I recently known that impress.js has been created as a HTML5 version of Prezi. This helps us to move away from the proprietary Flash technology, and instead use an open web standard that will become universal to all platforms.

However, it is annoying to type up the code on a HTML text editor (like writing the translation, rotation, and the scale values for the slide). It becomes difficult to visualize the presentation especially when the code is extended to an unbearable length.

So here is an example I just created. When reading the HTML code below, it is hard to know exactly where the slides are, and how they will be displayed.

<div id="impress">
    <div class="step" data-x="0" data-y="0">
        Slide 1 at origin.
    </div>

    <div class="step" data-x="100" data-y="100" data-scale="0.5">
        Slide 2 has been moved south-eastern side and shrunk by half compared to slide 1.
    </div>

    <div class="step" data-x="-500" data-y="-405" data-rotate-x="50" data-rotate-y="-34" data-rotate-z="50" data-scale="2.5">
        Slide 3 has been rotated in 3D and is 2.5x larger than slide 1.
    </div>
</div>

<script type="text/javascript" src="impress.js"></script>

A JS Fiddle Example.

So is there a WYSIWYG HTML5 Prezi editor that I could use? I would want one as it will make it much easier to create presentations based on HTML5, CSS3, and JavaScript.

Answer 1

Hey I recently made Strut. Its a presentation editor just for ImpressJS and is currently in alpha but there is a live demo up here: http://strut.io

Github repository: https://github.com/tantaman/Strut

and here is a youtube vid about it: http://www.youtube.com/watch?v=zA5s8wwme44&feature=share

You can add/remove slides, insert images and text boxes, change fonts, save presentations, and modify transitions between slides by moving slides around in the x,y & z directions.

Answer 2

There are several WYSIWYG editors for Impress.js, discussed on its GitHub issue tracker.

Strut and Impressionist seem to be the most praised. Strut is very actively developed (last commit: yesterday)

Not discussed there is http://www.impressi.me/, which seems abandoned since April 2012. It's also very basic: you can only add text and transitions. No images, can't enter a custom font size.

Answer 3

There is another way to create impress.js presentations and it's completely free - available on www.jspres.com. 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 for an example. 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)

http://jspres.com/presentation/present/p:3

http://jspres.com/presentation/present/p:31

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: http://blog.jspres.com/2013/03/getting-started/

So I will put some screens to provoke a little curiosity in you to see the project. I wish you will like it.

Answer 4

For editing the slides content inline there's a first prototype made with Aloha Editor* available at http://lab.evo42.net/editable-impress.js/ -- adding or arranging slides is not possible yet...

*) http://aloha-editor.org