APERVEIL / DOCS / BLOCKS

Props — Blocks

Override an Aperveil block's content, design and shader with props in React and Vue, and make its form live with onSubmit.

Props

In React and Vue, the block renders with the design you made; every prop is optional and overrides one part of it:

Prop	What it does
content	Overrides any line of the copy, by its key (heading, description…). Lines you leave out keep the copy you wrote in the studio.
design	Replaces the colours and typefaces.
shader	Replaces the shader's values, as the shader's own component takes them.
paused	Holds the shader's frame.
onSubmit	On a form block: receives the field values and makes the form live (see Forms).

Contact.tsx

import ContactPanelSection from "@/components/aperveil/contact-panel";

export default function Contact() {
  return (
    <ContactPanelSection
      content={{ heading: "Talk to us" }}
      onSubmit={async (values) => {
        const response = await fetch("/api/contact", { method: "POST", body: JSON.stringify(values) });
        if (!response.ok) throw new Error("Could not send");
      }}
    />
  );
}

In plain HTML and WordPress the design and copy are written into the markup: edit them there, or change them in the studio and download again.

Installing shaders on their own: see the guide for React, Vue, HTML, WordPress or Framer.