PaperBits Demo

This repository shows an example how developers can use PaperBits library to build their own web app with a nice online content editing capability.

You can see and play online with content editing capability on paperbits.io. Just follow tutorial steps.

For your convenience you can use and extend PaperBits library built on top of your favorite javascript framework Knockout, Angular or Aurelia.

Please check out detailed documentation page, getting started guides and repo with samples.

Basic functionality overview

If you have a website and need quickly extend it with web content edit functionality. You can easily add PaperBits library and get on your website flexible and light tools to create and edit all kinds of web content.

Add script and styles on your page

<script src="https://cdn.paperbits.io/everything.min.js" type="text/javascript"></script>
<link href="https://cdn.paperbits.io/everything.min.css" rel="stylesheet" type="text/css">

We support several web components with content editing capability. You can see component borders when you hover a mouse over it. You can change a selection for an active component. To switch to content edit mode just double click on a component and escape key for exit. In edit mode, you can change properties for selected component. You can drag selected component editor and place it in any position. To delete an item from the page, select it and press the delete key.

Text edit

<paper-textblock></paper-textblock>

Textblock component support standard set of text styling features.

Picture edit

<paper-picture src="https://paperbits.io/images/pen-fight.svg" layout="noframe"></paper-picture>

You can add a picture element on a page by drag it from file explorer and drop it on a page. After the drop, you will see a notification popup to upload the picture to the media library. (Also, you can upload pictures directly to the media library) As soon as picture file will be uploaded, it will be accessible through the media library for drag and drop on a page.

Another approach adding a picture on a page is drag and drop picture widget from the widget library and upload a picture file through the picture editor.

Installation

PaperBits requires Node.js v5+ and TypeScript to run.

You need TypeScript, Bower and Gulp installed globally:

$ npm install -g typescript
$ npm install -g typings 
$ npm install -g bower 
$ npm install -g gulp

Clone PaperBits demo repo from GitHub

$ git clone [git-repo-url] paperbits-demo

Install required packages

$ cd paperbits-demo
$ npm install
$ bower install

Install required typings

$ cd src
$ typings install

License

GNU GPL 3