paperjs

!File Size
!Forks
!Stars
!Issues
!License

Installation

$3

Import Paper JS using CDN.

``js
import { PaperJSInterpreter } from 'https://cdn.jsdelivr.net/npm/paperjs';
`

#### 🚧 Specific Version
`js
import { PaperJSInterpreter } from 'https://cdn.jsdelivr.net/npm/paperjs@latest';
`

$3

Install Paper JS using npm and node.

`bash
npm install paperjs
`

Import

Import paperjs definitions from `PaperJSInterpreter`.

`index.js`

`js
import { PaperJSInterpreter } from './paperjs/import.min.js';

PaperJSInterpreter.interpret(paperjs);
`

Usage

Use the tree structure in your Javascript. That's it 🎉.

`script.js`

`js
import { PaperJSInterpreter } from 'https://cdn.jsdelivr.net/npm/paperjs';

const paperjs = {
div: {
class: 'container',
styles: 'justify-content: center;display: flex;align-items: center;height: 100%;width: 100%;top: 0;left: 0;right: 0;bottom: 0;position: fixed;',
form: [
{
styles: 'width: 300px;',
input: [
{
type: 'email',
placeholder: 'Email',
styles: 'display: flex;width: 100%;height: 38px;',
},
{
type: 'password',
styles: 'margin-top: 12px;display: flex;width: 100%;height: 38px;',
placeholder: 'Password',
},
],
label: [
{
value: 'Join newsletter',
styles: 'display: flex;font-family: "Roboto", sans-serif;margin-top: 28px;width: 100%;',
input: [
{
type: 'checkbox',
id: 'checkbox',
styles: 'display: flex;margin-left: 10px;',
},
],
},
],
button: [
{
styles: 'margin-top: 20px;display: flex;width: 100%;align-items: center;height: 32px;justify-content: center;',
value: 'Reset',
type: 'reset',
class: 'reset-button',
},
],
},
],
},
};

PaperJSInterpreter.interpret(paperjs);
``

Examples

* A basic form with PaperJS.

* A simple sidebar with PaperJS.

* Using the library with Material UI.

Copyright and license

Licensed under the MIT License, Copyright © 2024-present Opensource-Paper.

See LICENSE for more information.