paperjs
v0.0.39
Published
Paper JS is a new way to write HTML entirely in your JavaScript.
Downloads
46
Maintainers
Readme
Installation
CDN
Import Paper JS using CDN.
import { PaperJSInterpreter } from 'https://cdn.jsdelivr.net/npm/paperjs';
🚧 Specific Version
import { PaperJSInterpreter } from 'https://cdn.jsdelivr.net/npm/paperjs@latest';
NPM
Install Paper JS using npm and node.
npm install paperjs
Import
Import paperjs definitions from PaperJSInterpreter
.
index.js
import { PaperJSInterpreter } from './paperjs/import.min.js';
PaperJSInterpreter.interpret(paperjs);
Usage
Use the tree structure in your Javascript. That's it 🎉.
script.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.