Prezi HTML5 Editor via impress.js

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.