npmpackage.info

Gathering detailed insights and metrics for @bpmn-io/form-js-playground

Other packages similar to @bpmn-io/form-js-playground

@bpmn-io/form-js

1.12.0

View and edit forms - powered by bpmn.io

bpmn-js-bpmnlint

0.22.3

bpmn-js integration for bpmnlint

diagram-js-direct-editing

3.2.0

Direct editing support for diagram-js

bpmn-js

18.1.1

A bpmn 2.0 toolkit and web modeler

Gathering detailed insights and metrics for @bpmn-io/form-js-playground

@bpmn-io/form-js-playground

View and visually edit JSON-based forms.

1.12.0

418

NOASSERTION

JavaScript

239,090 4.7

Installations

npm install @bpmn-io/form-js-playground

Pull Requests

Open

13

Total

787

Closed

73

Merged

701

Issues

Open

135

Total

534

Closed

399

Releases

Unable to fetch releases

Developer

bpmn-io

Developer Guide

BETA

Module System

CommonJS, ESM

Min. Node Version

Typescript Support

Yes

Node Version

20.17.0

NPM Version

lerna/8.1.9/node@v20.17.0+x64 (linux)

Statistics

418 Stars

1,768 Commits

108 Forks

19 Watching

38 Branches

26 Contributors

Updated on 21 Nov 2024

Languages

JavaScript (92.56%)

CSS (4.24%)

SCSS (2.76%)

Shell (0.21%)

HTML (0.16%)

TypeScript (0.08%)

Total Downloads

Cumulative downloads

Total Downloads

239,090

Last day

-3.6%

845

Compared to previous day

Last week

14.7%

4,461

Compared to previous week

Last month

9.8%

18,048

Compared to previous month

Last year

171.2%

167,178

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

@bpmn-io/form-js

View, visually edit and simulate JSON-based forms.

Usage

This library exports a form viewer, editor and playground.

Display a form

Renders a form based on a form schema and existing data:

1import { Form } from '@bpmn-io/form-js';
2
3const form = new Form({
4  container: document.querySelector('#form'),
5});
6
7await form.importSchema(schema, data);
8
9form.on('submit', (event) => {
10  console.log(event.data, event.errors);
11});

See viewer documentation for further details.

Create and edit a form

Create a new form or edit an exsting one:

1import { FormEditor } from '@bpmn-io/form-js';
2
3const formEditor = new FormEditor({
4  container: document.querySelector('#form-editor'),
5});
6
7await formEditor.importSchema(schema);

See editor documentation for further details.

Create and simulate a form with input and output data

Create and simulate a form with input and output data:

1import { FormPlayground } from '@bpmn-io/form-js';
2
3const formPlayground = new FormPlayground({
4  container: document.querySelector('#form-playground'),
5  schema,
6  data,
7});

See playground documentation for further details.

Retrieve schema variables from a form

Use the getSchemaVariables util to retrieve the variables defined in a form schema. This is useful to gather what data is consumed and produced by a form.

1import { getSchemaVariables } from '@bpmn-io/form-js';
2
3const variables = getSchemaVariables(schema);
4
5console.log('Schema variables', variables);

It is also possible to distinct between input and output variables:

1import { getSchemaVariables } from '@bpmn-io/form-js';
2
3const outputVariables = getSchemaVariables(schema, { inputs: false });
4const inputVariables = getSchemaVariables(schema, { outputs: false });

Resources

Build and run

Build the project in a Posix environment. On Windows, that is Git Bash or WSL.

Note we currently support development environments with Node.js version 16 (and npm version 8). We encourage you to use a Node.js version manager (e.g., nvm or n) to set up the needed versions.

Prepare the project by installing all dependencies:

1npm install

Then, depending on your use-case you may run any of the following commands:

1# build the library and run all tests
2npm run all
3
4# spin up a single local form-js instance
5npm start
6
7# spin up a specific instance
8
9## viewer
10npm run start:viewer
11
12## editor
13npm run start:editor
14
15## playground
16npm run start:playground

To run the visual regression tests, read the docs here

License

Use under the terms of the bpmn.io license.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Security-Policy

Determines if the project has published a security policy.

9

License

Determines if the project has defined a license.

5

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 5

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/CI.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/CI.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/CI.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/CI.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/CI.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/CI.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/CI.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/CI.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/DEPLOY_PLAYGROUND_PREVIEW.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/DEPLOY_PLAYGROUND_PREVIEW.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/MERGE_DEVELOP_TO_V2.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/MERGE_DEVELOP_TO_V2.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/MERGE_DEVELOP_TO_V2.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/MERGE_DEVELOP_TO_V2.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/MERGE_MASTER_TO_DEVELOP.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/MERGE_MASTER_TO_DEVELOP.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/MERGE_MASTER_TO_DEVELOP.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/MERGE_MASTER_TO_DEVELOP.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/POST_RELEASE.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/POST_RELEASE.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/POST_RELEASE.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/POST_RELEASE.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/TEARDOWN_PLAYGROUND_PREVIEW.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/TEARDOWN_PLAYGROUND_PREVIEW.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/UPDATE_VISUAL_SNAPSHOTS.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/UPDATE_VISUAL_SNAPSHOTS.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/UPDATE_VISUAL_SNAPSHOTS.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/UPDATE_VISUAL_SNAPSHOTS.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/UPDATE_VISUAL_SNAPSHOTS.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/UPDATE_VISUAL_SNAPSHOTS.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/VISUAL_REGRESSION.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/VISUAL_REGRESSION.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/VISUAL_REGRESSION.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/VISUAL_REGRESSION.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/VISUAL_REGRESSION.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/bpmn-io/form-js/VISUAL_REGRESSION.yml/develop?enable=pin
Warn: npmCommand not pinned by hash: tasks/stages/update-demo:19
Warn: npmCommand not pinned by hash: tasks/stages/update-examples:29
Info: 6 out of 18 GitHub-owned GitHubAction dependencies pinned
Info: 6 out of 12 third-party GitHubAction dependencies pinned
Info: 4 out of 6 npmCommand dependencies pinned

3

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

4.7

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @bpmn-io/form-js-playground

Other packages similar to @bpmn-io/form-js-playground

@bpmn-io/form-js-playground

Installations

Pull Requests

13

787

73

701

Issues

135

534

399

Releases

Unable to fetch releases

Developer

Developer Guide

CommonJS, ESM

Yes

20.17.0

lerna/8.1.9/node@v20.17.0+x64 (linux)

Statistics

Languages

Total Downloads

239,090

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

@bpmn-io/form-js

Usage

Display a form

Create and edit a form

Create and simulate a form with input and output data

Retrieve schema variables from a form

Resources

Build and run

License

10

10

10

10

9

5

3

1

0

0

0

0

0

4.7

/10