Integrations

The picture is the same whatever draws it: a spec, mounted. p5loom ships a web component for any page, and small wrappers for React and Vue. Each wrapper takes the framework as an argument, so the library itself has no dependency on any of them.

Web componentAny page, no framework

Define the element once, then use it like an image. src fetches a spec; spec takes one inline.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
<script type="module">
  import { defineP5Loom } from "/lib/element.js";
  defineP5Loom();
</script>

<p5-loom src="/examples/bar-chart.json" share-key="revenue"></p5-loom>

The element above, drawing the bar chart from its src attribute.

ReactA component that mounts on the client

import React from "react";
import { p5LoomComponent } from "p5loom/react";

const P5Loom = p5LoomComponent(React);

export function Revenue({ spec, dots, onChange }) {
  return <P5Loom spec={spec} values={{ dots }} onChange={onChange} />;
}

The picture is drawn after the component mounts, never during server rendering. A new spec remounts it. New values are applied with set, so a slider drag does not rebuild the picture.

Vue 3A component with a change event

<script setup>
import { h, defineComponent } from "vue";
import { p5LoomVueComponent } from "p5loom/vue";

const P5Loom = p5LoomVueComponent({ h, defineComponent });
</script>

<template>
  <P5Loom :spec="spec" :values="{ dots: 300 }" @change="save" />
</template>

Changing spec remounts the picture. Changing values applies them. @change receives the values after every change.

Import pathsPick what you need

import { mount } from "p5loom";
import { defineP5Loom } from "p5loom/element";
import { p5LoomComponent } from "p5loom/react";
import { p5LoomVueComponent } from "p5loom/vue";