XO-JS

▷ Docs

This documentation is best viewed at https://www.xo-js.dev.

A complete playground (Studio) is included and code examples can directly be run and edited.

XO-JS is a compact, developer-friendly, pure JavaScript (ES6) Component Library that helps with Progressive Web App development and includes a Declarative Web Forms Engine

< 70KB minified and Brotli-compressed

No external dependencies

Vue, React, Angular, Vanilla JS supported

Modules

xo.form
xo.pwa

Installing

CDN

Use XO directly from the CDN:

<script src="https://xo-js.dev/v1.4/xo.js"></script>
or...
<script src="https://xo-js.dev/v1.4/xo.min.js"></script>

NPM

... or get the latest NPM package

Background

Large Enterprise, Multi-tenant SaaS apps are extremely configurable at all levels. Also, they need automated, self-service onboarding, in order to set the basics for a new tenant or user, manage user authorization, subscription management, and all data that the specific SaaS product needs to manage.

Building complete front-ends in a bespoke way is a tedious, error-prone and costly undertaking.

Also, each of these developments adds overhead in terms of testing and deployment.

Lastly, maintaining consistence over all front-end facing application parts is not a small task.

How does XO-JS solve this problem?

A way to solve all these issues at once, and speed up delivery of countless new front-end data-collecting requirements, is to have a highly flexible Forms Generator that can be fed declarative form schema data and automatically render forms.

Examples of this type of product are XForms generators, Wufoo, TypeForm, JotForms and others.

Why develop a new one, then?

Well, because I've seen what developers need. They need to save as much time as needed, yet have all the power to themselves.

What does ExoForm bring?

ExoForm gives developers complete freedom: simply include it in your development stack, and bypass, subclass, add anything you want.
No bulky dependencies. HTML5, CSS3, ECMAScript. That's it. They're powerful enough ;-)
Use it in any environment, Vue, React, Angular, or plain vanilla JavaScript.
Create and include your own ExoForm control libraries.
Customize anything: styling, validation, navigation, progress indication, etc.
Get typed JSON post data
All HTML5 controls included, plus a large number of custom controls
Ace Code Editor, CkEditor wysiwyg editor (richt text)
Examples of adding your own controls at codepen.io. For example, use the Monaco Editor.
Autocompletion extension on text controls
Standard HTML5 & Inline validation (or roll your own)
Wizards & other multi-page forms, Surveys, Tabstrip-type forms, etc. (see Navigation)
Completely overridable rendering & theming
A visual ExoForm Studio and Test Environment
- Code Editor with JSON/JS support
- Wysiwyg designer (in development)
- Jest test environment
Codepen examples
Etc.