Wikidocs provides a state of the art globally unique real time collaborative editing API for HTML. No more a huge amount of time, resources and knowledge is necessary to enable real time collaborative editing for HTML. In less than 1h an average web developer can make almost any WYSIWYG editor collaborative. The technology works on HTML for desktop, tablet, mobiles and on native applications. Wikidocs offers a service, installation in your own cloud, or OEM components to integrate in your software.

1. Real time collaborative
editing for HTML

2. Realtime collaborative editing
★ though operation transformation (OT)
★ for your HTML content
★ with true WYSIWYG
★ for web and native

3. About OT for HTML
“[...]and HTML makes OT (Operational Transforms)
difficult if not impossible[...]”
http://www.waveprotocol.org/faq#TOC-What-s-the-XML-schema-for-waves-Why-isn-t-it-HTML5-
says

4. About OT for HTML
“[...]and HTML makes OT (Operational Transforms)
difficult if not impossible[...]”
http://www.waveprotocol.org/faq#TOC-What-s-the-XML-schema-for-waves-Why-isn-t-it-HTML5-
it is possible
says

5. create, share, edit on the go
★ for desktop, tablet, mobile
★ web and native
★ native is more responsive
and offers better
possibilities for end user
interaction

6. embed wikidocs wiki in your system
★ Customizable and embed-able
★ 100% REST API coverage
★ authentication, access permissions,
user management, storage, scalable,
etc.
★ a starting point to extend your system
with a wiki functionallity

7. embed wikidocs wiki in your system
★ Customizable and embed-able
★ 100% REST API coverage
★ authentication, access permissions,
user management, storage, scalable,
etc.
★ a starting point to extend your system
with a wiki functionallity
wikidocs demo app
embeded as facebook app

8. wikidocs api: create a new app or
integrate smoothly in your existing system
★ Your app
★ Your users
★ Your access rules
★ We sync

9. wikidocs api: create a new app or
integrate smoothly in your existing system
★ Your app
★ Your users
★ Your access rules
★ We sync
wikidocs api transparently
integrated in facebooks
group docs editor

10. Nice, but what’s the real difference?
vs vs

11. Nice, but what’s the real difference?
vs vs
First break is a line
break second a
paragraph break.

12. Nice, but what’s the real difference?
vs vs
Telepointers are out of
sync with content.
First break is a line
break second a
paragraph break.

13. Nice, but what’s real difference?
<div class="kix-paragraphrenderer"><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-spelling-
error kix-htmloverlay docs-ui-unprintable" style="top: 0px; left: 0px; width: 61px; height: 17px;"></div><div class="kix-lineview-content"
style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 61px; padding-left:
0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font-
variant:normal;text-decoration:none;vertical-align:baseline;">Realti</span><span style="font-size:15px;font-
family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:none;vertical-
align:baseline;">me</span></span></div></div><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-
lineview-content" style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 82px;
padding-left: 0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-
style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;">collaborative</span></span></div></div></div><div class="kix-
paragraphrenderer"><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-lineview-content"
style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 50px; padding-left:
0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-
variant:normal;text-decoration:none;vertical-align:baseline;">&nbsp;</span><span style="font-size:15px;font-
family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-variant:normal;text-
decoration:underline;vertical-align:baseline;">ed</span><span style="font-size:15px;font-family:Arial;color:#000000;background-
color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;">iting</span><span
style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-
variant:normal;text-decoration:none;vertical-align:baseline;">.</span></span></div></div></div>
vs vs

14. Nice, but what’s real difference?
vs vs
<pre>
! <span class=" firepad-b">Realti</span><span class=" firepad-b firepad-i">me</span>
</pre>
<pre>
! <span class=" firepad-i">collaborative</span>
</pre>
<pre>
! <span class=" firepad-u firepad-i">ed</span><span class=" firepad-u">iting</span>
</pre>

15. Nice, but what’s real difference?
vs vs
<p>
! <b>Realti<i>me</i></b><br>
! <i>collaborative</i>
</p>
<p>
! <u><i>ed</i>iting</u>
</p>

16. What about custom attributes?
<p contenteditable=”true”>
! <span data-my-attr=”needs-work”>H3lp</span>
! <i class=”highlight”>me</i>
</p>
This is an important feature for custom editing functionalities and extensions.

17. What about custom attributes?
<p contenteditable=”true”>
! <span data-my-attr=”needs-work”>H3lp</span>
! <i class=”highlight”>me</i>
</p>
we synch them
This is an important feature for custom editing functionalities and extensions.

18. What about non editables?
<p contenteditable=”true”>
<h1>Watch this</h1>
! <div class=”video” contenteditable=”false”>
! ! <iframe src="//youtu.be/841FgLrc-zQ">
! ! </iframe>
! </div>
</p>
This is an important feature for rich media integration.

19. What about non editables?
<p contenteditable=”true”>
<h1>Watch this</h1>
! <div class=”video” contenteditable=”false”>
! ! <iframe src="//youtu.be/841FgLrc-zQ">
! ! </iframe>
! </div>
</p>
we synch them
This is an important feature for rich media integration.

20. What’s the payload?
sockjs.min.js 13,2kB
wikidocs.min.css 1,5kB
wikidocs.min.js 47,2kB

21. You have HTML, we synch it.
<html>
<body>
! <div id="content-1234"
! ! contenteditable="true">
! <h1>Hello World</h1>
! <p>Wikidocs is here!</p>
! </div>
</body>
</html>
<link rel="stylesheet" href="wikidocs.css">
<script src="sockjs.min.js"></script>
<script src="wikidocs.min.js"></script>
var app = WD.App(accessToken);
var editable =
! document.getElementById('content-1234');
app.Document('/channel-1234').bind(editable);

22. How can I see collaborators?
var app = WD.App(accessToken);
var editable = document.getElementById('content-1234');
var doc = app.Document('/channel-1234').bind(editable);
doc.on('subscribed', updateSubscribers);
doc.on('unsubscribed', updateSubscribers);
function updateSubscribers(session) {
! doc.subscriptions.forEach(function (session) {
! ! // do magic...
! });
}
Wikidocs api provides additional features to provide a good user experience
around real time collaborative editing.

23. Implementationeffort
knowledgenecessary
othersynch
Be smart. Focus on your value
and let Wikidocs synch for you.

24. We create value through sharing and collaboration.