Marcelle

Installation

There are several ways to start using Marcelle:

⚠️ Experimental

Marcelle is still experimental and is currently under active development. Breaking changes are expected.

Using create-marcelle

To create a new Marcelle project, just run:

npm init marcelle marcelle-tutorial
cd marcelle-tutorial
npm install

yarn create marcelle marcelle-tutorial
cd marcelle-tutorial
yarn

pnpm create marcelle marcelle-tutorial
cd marcelle-tutorial
pnpm i

See the CLI's documentation for more information about available options.

Using a package manager

npm install @marcellejs/core --save

yarn add @marcellejs/core

pnpm add @marcellejs/core

Direct Download / CDN

<script src="https://unpkg.com/@marcellejs/core"></script>

The following HTML and JS snippets provide a template marcelle application.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Marcelle Example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/@marcellejs/core@latest/dist/marcelle.css" />
    <script defer type="module" src="script.js"></script>
  </head>
  <body>
    <noscript>
      <strong>
        We're sorry but this application doesn't work properly without JavaScript enabled. Please
        enable it to continue.
      </strong>
    </noscript>
  </body>
</html>

import { dashboard, webcam } from 'https://unpkg.com/@marcellejs/core';

const w = webcam();

const dash = dashboard({
  title: 'Hello Marcelle',
  author: 'Jane Doe',
});

dash.page('Main').sidebar(w);

dash.show();