
Security News
AGENTS.md Gains Traction as an Open Format for AI Coding Agents
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
@camunda/form-playground
Advanced tools
Camunda Form Playground.
Integrate the playground into your application:
import { createCamundaFormPlayground } from 'camunda/form-playground';
const formPlayground = await createCamundaFormPlayground({
container: document.querySelector('#container'),
data,
schema
});
// open preview
formPlayground.open();
// close preview
formPlayground.collapse();
// listen on editor events
const formEditor = formPlayground.getEditor();
formEditor.on('selection.changed', () => { ... });
For proper styling include the necessary stylesheets, and font used:
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/@camunda/form-playground@0.3.0/dist/assets/form-js.css">
<link rel="stylesheet" href="https://unpkg.com/@camunda/form-playground@0.3.0/dist/assets/form-js-editor.css">
<link rel="stylesheet" href="https://unpkg.com/@camunda/form-playground@0.3.0/dist/assets/camunda-form-playground.css">
createCamundaFormPlayground => Promise<Result, Error>
Create a fully rendered form playground with options.
import { createFormPlayground } from '@camunda/form-playground';
const formPlayground = await createFormPlayground({
container: document.querySelector('#form-playground'),
data,
schema
});
CamundaFormPlayground
Create a new form playground with options.
import { CamundaFormPlayground } from '@camunda/form-playground';
const formPlayground = new CamundaFormPlayground({
container: document.querySelector('#form-playground'),
data,
schema
});
There are several options that can be passed to the createFormPlayground
or CamundaFormPlayground
:
{
container: HTMLElement, // optional - the container to render the form playground into
data: {}, // required - set the initial form data
schema: {}, // required - set the initial form schema
exporter: { name: '', version: '' }, // optional - set the schema exporter name and version
layout: {}, // optional - set the initial form layout
editorAdditionalModules: [], // optional - add additional modules to the form editor
viewerAdditionalModules: [], // optional - add additional modules to the form preview
editorProperties: {}, // optional - set the initial form editor properties
viewerProperties: {}, // optional - set the initial form preview properties
}
As an example, you can use the viewerProperties
to override the default behavior to open external links in a new tab:
viewerProperties: {
textLinkTarget: '_blank'
}
CamundaFormPlayground#open(containers?: string[]) => void
Open all or specific playground containers.
// open all
formPlayground.open();
// open specific
formPlayground.open([ 'form-preview' ]);
CamundaFormPlayground#collapse(containers?: string[]) => void
Collapse all or specific playground containers.
// collapse all
formPlayground.collapse();
// collapse specific
formPlayground.collapse([ 'form-preview' ]);
CamundaFormPlayground#get(type: String, strict: Boolean) => any
Get a service from the embedded form editor.
const eventBus = formPlayground.get('eventBus');
CamundaFormPlayground#getDataEditor() => JSONEditor
Get the embedded input data editor.
const dataEditor = formPlayground.getDataEditor();
const data = dataEditor.getValue();
CamundaFormPlayground#getEditor() => FormEditor
Get the embedded form editor.
const editor = formPlayground.getEditor();
editor.on('selection.changed', () => { ... });
CamundaFormPlayground#getForm() => Form
Get the embedded preview form.
const form = formPlayground.getForm();
form.on('submit', event => {
console.log('Form <submit>', event);
});
CamundaFormPlayground#getResultView() => JSONEditor
Get the embedded output data view.
const resultView = formPlayground.getResultView();
const data = resultView.getValue();
CamundaFormPlayground#getSchema() => any
Get the current form schema.
CamundaFormPlayground#setSchema(schema: any) => void
Set the form schema.
CamundaFormPlayground#saveSchema() => any
Export the form schema from the embedded form editor.
const schema = formPlayground.saveSchema(schema);
console.log('exported schema', schema);
CamundaFormPlayground#attachTo(parent: HTMLElement) => void
Attach the form playground to a parent node.
CamundaFormPlayground#detach() => void
Detach the form playground from its parent node.
CamundaFormPlayground#fire(event) => void
Fire an event.
CamundaFormPlayground#on(event, fn) => void
Subscribe to an event.
CamundaFormPlayground#off(event, fn) => void
Unsubscribe from an event.
CamundaFormPlayground#destroy() => void
Remove form playground from the document.
To get the development setup make sure to have NodeJS installed. As soon as you are set up, clone the project and execute
npm install
npm start
MIT
0.22.0
DEPS
: update to @bpmn-io/form-js@1.16.0DEPS
: bump puppeteerDEPS
: bump minor depsDEPS
: refresh lockfileFAQs
Camunda Form Playground.
We found that @camunda/form-playground demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.