Facet documentation

Start with a working example

Open Fields to edit JavaScript, React, Vue, or Angular source and see the rendered component. Compilation happens locally in a worker. Each framework and sample keeps its own code and CSS drafts.

Examples execute inside an isolated preview. Use the bundled imports shown in the starter and keep secrets out of executable examples. Vue uses TypeScript render functions; single-file components are not compiled in this workspace.

Explore the components

Choose your framework

The browser-native components have typed adapters for React, Vue, and Angular. Adapters forward real component events and expose the underlying element where supported. Read each component's framework section for its current contract.

import { defineWispField } from '@linewisp/wisp-fields';

defineWispField();
document.querySelector('wisp-field').configure({
  name: 'workspace',
  label: 'Workspace name',
  type: 'text',
  clearable: true,
  characterCount: true,
  maxLength: 40,
});

Place a <wisp-field> element inside your page or form before configuring it. For framework-specific rendering, start with the React, Vue, or Angular example.

Vue v-model and Angular reactive-form integration are still planned. Do not assume these contracts are available because an adapter exists.

Use a shared theme

Components support linewisp, midnight, violet, and high-contrast. Density can be compact, standard, or comfortable. Change the appearance without replacing a component's value.

field.theme = 'midnight';
field.density = 'comfortable';

The theme selector in this documentation changes the reading interface. The demo workspace has separate controls for component appearance.

Understand the boundaries

Useful browser-side features remain free. Hosted team services and paid entitlements are not enabled for public purchase. Each guide lists current behavior and limitations; no preview is a claim of complete feature parity with another library.

Facet uses original Linewisp code, naming, assets, and APIs. Imported values and labels are rendered safely. Read the security information and privacy notice for the public products.