Resources
Use the following resources to get started developing Form plugins.
Jump to:
Choosing a framework
Form plugins supports most modern web component frameworks. We recommend Lit as a fast, lightweight framework. For a list of resources to aid in learning and developing with Lit, see the Awesome Lit GitHub reference. For a non-exhaustive comparative list of frameworks, see All the ways to make a web component on webcomponents.dev.
Some things to consider when choosing a framework:
- Plugins using different versions of React may cause unexpected behavior when they are loaded together in a form. For a React-like framework that offers .jsx and hooks, see Atomico.
- Building plugins with Angular may result in very large plugins, as Angular includes functionality for full web applications that is not required by web components.
- Avoid building plugins using JQuery. Form plugins uses the Shadow DOM, which JQuery does not support. See youmightnotneedjquery.com for help on migrating existing functionality away from JQuery.
Using npm
Npm (Node Package Manager) is a library and registry of JavaScript packages that provides tools for installing and managing dependencies and building your code. See the npm documentation to get started.
Developing with Storybook
Storybook is a UI-component development environment that allows you to develop and test individual UI components easily. The examples provided in the Form plugins GitHub repository have been configured to work with Storybook.
For more information on Storybook, see the Storybook web page.
Accessibility and best practices
Follow web component and accessibility best practices and standards to ensure your plugin works well within the Forms environment and with other plugins.
- See Guidelines for creating web platform compatible components, by W3.
- Also see the Gold standard checklist for web components, on GitHub.
- For best practices for creating web components, see Custom Element Best Practices at web.dev.
- For accessibility standards and best practices, See the Web Accessibility Initiative.
- For accessibility testing, try tools such as Lighthouse or the Dom Accessibility Inspector.
- See Example patterns for accessible components from the ARIA Authoring Practices Guide.
Also see the Developer accessibility checklist.