paperjs

Paper JS is a new way to write HTML entirely in your JavaScript.

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.