Paper JS is a new way to write HTML entirely in your JavaScript.
npm install paperjs
!File Size
!Forks
!Stars
!Issues
!License

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';
Install Paper JS using npm and node.
`bash`
npm install paperjs
Import paperjs definitions from `PaperJSInterpreter`.
`index.js`
`js
import { PaperJSInterpreter } from './paperjs/import.min.js';
PaperJSInterpreter.interpret(paperjs);
`
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);
``
* A basic form with PaperJS.
* A simple sidebar with PaperJS.
* Using the library with Material UI.
Licensed under the MIT License, Copyright © 2024-present Opensource-Paper.
See LICENSE for more information.