Awesome Open Source
Awesome Open Source

๐ŸŒŸ Welcome to DataFormsJS!

Thanks for visiting! ๐ŸŒ ๐Ÿ‘

๐ŸŒ ย  ๐ŸŒŽ ย  ๐ŸŒ ย  ๐ŸŒ
ไธญๆ–‡ (็ฎ€ไฝ“) ๆฌข่ฟŽๆฅๅˆฐ DataFormsJS
Espaรฑol Bienvenido a DataFormsJS
Portuguรชs (do Brasil) Bem vindo ao DataFormsJS
ๆ—ฅๆœฌ่ชž DataFormsJSใธใ‚ˆใ†ใ“ใ

DataFormsJS is a JavaScript Framework and Standalone React and Web Components. A tiny browser-based JSX Compiler is also included as part of this Framework. DataFormsJS is small in size, easy to learn, designed for fast development, and to make for a great experience for both developers and end-users. DataFormsJS was first published in November of 2019, however it was written and used over many years and is extremely stable containing a large number of unit tests.

This repository contains DataFormsJSโ€™s Framework, Example Pages, and Unit Tests. The main website exists on another repository.

๐Ÿ’ซ Why use DataFormsJS?

Faster Development Small Size Easy to Learn
Faster Development Display data from Web and GraphQL Services using only HTML Markup and define App and Site features using HTML Attributes. Small Size All files are small in size and downloaded only when used allowing for greater performance and a smaller site. Easy to Learn DataFormsJS is built around HTML, CSS, JavaScript, Templating and has a minimal JavaScript and HTML API so you can get started immediately.
Stability Flexibility Better Sites
Stability Designed for long term use; a site developed with DataFormsJS today will work great and be easy to maintain decades from now. Flexibility Works well with other code and the API is designed for flexibility and custom features. If you can think it, you can build it with DataFormsJS. Better Sites DataFormsJS is designed to be a great experience for both developers and end users allowing you to create better sites.
Works with React
and more!
Learn something new!
Web Components
Web Components

๐Ÿš€ Getting Started

Getting started with DataFormsJS is extremely easy.

Install from npm, this option works great if you are using create-react-app or want a copy of all files locally:

npm install dataformsjs

Download this Repository. Itโ€™s small to download because this repository has no dependencies and loads HandlebarsJS, Vue, and React from a CDN. To view example pages locally Node needs to be installed and then you can start the local server using:

npm start

The start screen allows you to quickly filter and view many different examples and resources.

DataFormsJS npm start page

JavaScript files for the Framework and standalone React and Web Components exist under the js directory. Full Directory Structure:

โ”œโ”€โ”€ docs
โ”œโ”€โ”€ examples
โ”‚   โ”œโ”€โ”€ *.htm
โ”‚   โ””โ”€โ”€ server.js
โ””โ”€โ”€ js
โ”‚   โ”œโ”€โ”€ DataFormsJS.js
โ”‚   โ”œโ”€โ”€ react\*.js
โ”‚   โ”œโ”€โ”€ web-components\*.js
โ”‚   โ””โ”€โ”€ *\*.js
โ”œโ”€โ”€ scripts\*.js
โ”œโ”€โ”€ server\app.js
โ””โ”€โ”€ test
    โ”œโ”€โ”€ *.htm
    โ””โ”€โ”€ server.js

Develop online using the code playground:

Code Playground

Download a template file using scripts from a CDN:

Getting Started Templates

๐Ÿ“„ Example Code - Vue with DataFormsJS Framework

This example uses Vue for templating. If you save it with a text editor you can view it locally in your browser. Additionally the main site contains many templates and examples. DataFormsJS works with both Vue 2 and Vue 3.

<!doctype html>
<html lang="en">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>DataFormsJS Example using Vue</title>
                <a href="#/">Home</a>
                <a href="#/data">Data Example</a>

        <main id="view"></main>

        <template data-route="/">
            <h1>Hello World!</h1>

        <template id="loading-screen">

            data-lazy-load="jsonData, flags"

            <h2 v-if="isLoading" class="loading">Loading...</h2>
            <h2 v-if="hasError" class="error">{{ errorMessage }}</h2>
            <div v-if="isLoaded">
                    <li v-for="country in countries">
                        <i v-bind:class="country.iso.toLowerCase() + ' flag'"></i>
                        <span>{{ }}<span>

        <!-- Vue 2 -->
        <script src="[email protected]/dist/vue.min.js"></script>

        <!-- Vue 3 -->
        <!-- <script src="[email protected]/dist/"></script> -->

        <!-- DataFormsJS -->
        <script src="[email protected]/js/DataFormsJS.min.js"></script>
            app.lazyLoad = {
                jsonData: '[email protected]/js/pages/jsonData.min.js',
                flags: '[email protected]/flag.min.css',
            app.settings.lazyTemplateSelector = '#loading-screen';

๐Ÿ“„ Example Code - React

This example uses React with the jsxLoader.min.js script for converting JSX to JS directly in the browser and it includes DataFormsJS React Components from DataFormsJS.min.js. If you copy the contents of this code it will also work in a browser. All React Components are also compatible with Preact when using jsxLoader.

<!doctype html>
<html lang="en">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>DataFormsJS Example using React</title>
        <link rel="stylesheet" href="[email protected]/flag.min.css">
        <div id="root"></div>

        <script type="text/babel">
            function ShowLoading() {
                return <div className="loading">Loading...</div>;

            function ShowError(props) {
                return <div className="error">{props.error}</div>;

            function ShowCountries(props) {
                return (
                            { && && => {
                                return (
                                    <li key={country.iso}>
                                        <i className={country.iso.toLowerCase() + ' flag'}></i>

            class App extends React.Component {
                render() {
                    return (
                                isLoading={<ShowLoading />}
                                hasError={<ShowError />}
                                isLoaded={<ShowCountries />}
                                loadOnlyOnce={true} />

                <App />,

        <script crossorigin="anonymous" src="[email protected]/umd/react.production.min.js"></script>
        <script crossorigin="anonymous" src="[email protected]/umd/react-dom.production.min.js"></script>
        <script src="[email protected]/js/react/jsxLoader.min.js"></script>
        <script type="module" src="[email protected]/js/react/es6/DataFormsJS.min.js"></script>
        <script nomodule src="[email protected]/js/react/es5/DataFormsJS.min.js"></script>

When working with node or webpack you will typically import Libraries using an import statement:

// Use React Hooks
import React, { useState, useReducer } from 'react';

// Use React Router
import {
  BrowserRouter as Router,
} from "react-router-dom";

// Use Redux
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux';

When working with the jsxLoader and compiling JSX directly in a browser the recommend method for importing is to simply reference the global classes or functions of the libraries that you need for your app:

// Use React Hooks
const useState = React.useState;
const useReducer = React.useReducer;

// Use React Router
const Router = ReactRouterDOM.HashRouter;
const Route = ReactRouterDOM.Route;
const NavLink = ReactRouterDOM.NavLink;
const Link = ReactRouterDOM.Link;

// Use Redux
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;
const createStore = Redux.createStore;

Many examples exist for popular React Libraries using jsxLoader at the following site:

Awesome Web React

๐Ÿ“„ Example Code - Web Components

This example uses DataFormsJS Web Components. Web Components are well defined standard and provide for functionally similar to JavaScript Frameworks while using less JavaScript code.

<!doctype html>
<html lang="en">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>DataFormsJS Example using Web Components</title>
                <a href="#/">Home</a>
                <a href="#/data">Data Example</a>

        <main id="view"></main>

        <template id="loading-screen">

            <url-router> and <url-route> will be used to define #hash routes
        <url-router view-selector="#view" loading-template-selector="#loading-screen">
            <!-- Home Page -->
            <url-route path="/">
                    <h1>Hello World!</h1>

                Display a list of Countries from a JSON Service. Elements
                with [data-bind] are populated with data from the Web Service.

                [lazy-load] is used along with `window.lazyLoad` near the bottom
                of this file to dynamically load scripts only if they will be used.
            <url-route path="/data" lazy-load="json_data, data_list, flags">
                    <json-data url="">
                            <div data-bind="errorMessage"></div>

            Template for <data-list> using Template literals (Template strings)
        <template id="country">
                <i class="${iso.toLowerCase() + ' flag'}"></i>

        <!-- DataFormsJS Web Components -->
        <script type="module" src="[email protected]/js/web-components/url-router.min.js"></script>
        <script nomodule src="[email protected]/js/web-components/polyfill.min.js"></script>
            window.lazyLoad = {
                json_data: { module: '[email protected]/js/web-components/json-data.min.js' },
                data_list: { module: '[email protected]/js/web-components/data-list.min.js' },
                flags: '[email protected]/flag.min.css',

๐Ÿค Contributing

All contributions are welcome. For major changes including breaking changes to existing code or updating existing graphics and files, please open an issue first to discuss what you would like to change. Some examples of items to contribute:

  • Typos and Grammar Mistakes - If you see any please fix and submit.
  • Documentation and Tutorials. Currently most documentation is in the quick reference section and code comments so a lot of documentation will be needed and written over time.
  • Many more examples will be developed in the future. If you have ideas please submit.
  • Additional Unit Tests and Testing Methods - Core Framework files and features are Unit Tested however every line of code should be Unit Tested in all files. Currently there is are no Unit Tests for Vue, React, and Web Components.
  • Additional Scripts, React Components, Web Components, and Features.
  • New Ideas - If you have ideas on how to improve then please open an issue to discuss.

The docs/to-do-list.txt file contains the full list of items that are currently pending and is good place to start.

โ“ FAQ

Why was DataFormsJS Created?

Initial development and use of DataFormsJS occurred privately in 2013 to allow for rapid development of high quality and bug free Single Page Applications (SPA). DataFormsJS was designed to have a small size, great performance, and to be much faster for development compared to other Frameworks. A few of the reasons for fast development include displaying JSON services using only Markup and Templating (Handlebars, Underscore, etc.) and defining App and Site features using HTML attributes and small JavaScript Plugins.

Early versions of DataFormsJS were used a number of companies in many different types of apps.

Now that both React and Vue have become very popular separate React Components have been developed to help with React Development and the Framework has been expanded to support Vue. Additionally separate Web Components have been developed to allow for similar functionality in modern browsers without using a JavaScript framework.

Why did it take so long to release?

The author of DataFormsJS had a number of busy jobs at the time and was also working on another large project at the same time FastSitePHP.

How large is DataFormsJS?

All sizes are based on minified scripts and gzip compression from the web server.

  • DataFormsJS Framework โ€“ 12.2 kB (151 kB full version uncompressed)

  • Additional files (controllers, plugins, etc) are typically only 1-3 kB each.

  • In general when using the Framework expect about 15 kB for the initial page load, and then several kB for additional pages that load extra plugins, pages, controllers, etc.

  • React JSX Loader โ€“ 6.9 kB (89 kB full version uncompressed)

  • React (Core Components) โ€“ 5.7 kB

  • Individual React Components are between 3 and 12 kB when uncompressed and including comments.

  • Web Components are typically around 1 to 3 kB each, typically you will use a number of components so in the example apps this adds up to about 15 kB for each app.

While the DataFormsJS Framework is small it will generally be used with a larger Templating or View Engine:

  • React: ~ 40 kB
  • Handlebars: ~ 22 kB
  • Vue 2: ~ 33 kB
  • Vue 3: ~ 40 kB
  • Underscore: ~ 6 kB
  • Nunjucks - ~ 25 kB

Additionally in a complex or large site third-party code is expected to account for the largest amount of JavaScript. For example CodeMirror Text Editor used on the Playground site is around 250 kB, however DataFormsJS has the ability to download third-party code only when it will be needed based on the URL.

How do I use the JSX Loader for React?

See the main document:

What are the future plans for DataFormsJS?

DataFormsJS is here for the long run and will be developed indefinitely with new features, components, examples, docs, etc. While DataFormsJS is a Framework it also includes standalone web components which can be used without the Framework. Over time many additional framework plugins and web components will be developed.

DataFormsJS will continue to be developed in a manner that allows for web based development (for example: the playground site) and will be kept small in size loading scripts only when needed.

What does the logo represent and where is the source?


The main DataFormsJS logo is a drawing of a hash symbol in a URL and it uses colors from the main DataFormsJS website. The logo was chosen because the DataFormsJS Framework was originally created for Single Page Applications (SPA).

๐Ÿ“ License

This project is licensed under the MIT License - see the LICENSE file for details.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,555,006)ย 
Vue (84,552)ย 
Reactjs (72,801)ย 
Markdown (6,627)ย 
Compiler (3,826)ย 
Webcomponents (2,115)ย 
Handlebars (1,841)ย 
Spa (1,605)ย 
React Components (1,379)ย 
Jsx (1,272)ย 
Preact (799)ย 
Playground (764)ย 
Single Page App (674)ย 
Custom Elements (596)ย 
Javascript Framework (442)ย 
Image Gallery (154)ย 
Related Projects
Advertising ๐Ÿ“ฆย 9
All Projects
Application Programming Interfaces ๐Ÿ“ฆย 120
Applications ๐Ÿ“ฆย 181
Artificial Intelligence ๐Ÿ“ฆย 72
Blockchain ๐Ÿ“ฆย 70
Build Tools ๐Ÿ“ฆย 111
Cloud Computing ๐Ÿ“ฆย 79
Code Quality ๐Ÿ“ฆย 28
Collaboration ๐Ÿ“ฆย 30
Command Line Interface ๐Ÿ“ฆย 48
Community ๐Ÿ“ฆย 81
Companies ๐Ÿ“ฆย 60
Compilers ๐Ÿ“ฆย 60
Computer Science ๐Ÿ“ฆย 74
Configuration Management ๐Ÿ“ฆย 39
Content Management ๐Ÿ“ฆย 167
Control Flow ๐Ÿ“ฆย 197
Data Formats ๐Ÿ“ฆย 77
Data Processing ๐Ÿ“ฆย 266
Data Storage ๐Ÿ“ฆย 132
Economics ๐Ÿ“ฆย 60
Frameworks ๐Ÿ“ฆย 198
Games ๐Ÿ“ฆย 122
Graphics ๐Ÿ“ฆย 103
Hardware ๐Ÿ“ฆย 148
Integrated Development Environments ๐Ÿ“ฆย 47
Learning Resources ๐Ÿ“ฆย 147
Legal ๐Ÿ“ฆย 28
Libraries ๐Ÿ“ฆย 119
Lists Of Projects ๐Ÿ“ฆย 21
Machine Learning ๐Ÿ“ฆย 336
Mapping ๐Ÿ“ฆย 61
Marketing ๐Ÿ“ฆย 15
Mathematics ๐Ÿ“ฆย 55
Media ๐Ÿ“ฆย 228
Messaging ๐Ÿ“ฆย 97
Networking ๐Ÿ“ฆย 304
Operating Systems ๐Ÿ“ฆย 84
Operations ๐Ÿ“ฆย 120
Package Managers ๐Ÿ“ฆย 52
Programming Languages ๐Ÿ“ฆย 229
Runtime Environments ๐Ÿ“ฆย 96
Science ๐Ÿ“ฆย 42
Security ๐Ÿ“ฆย 375
Social Media ๐Ÿ“ฆย 26
Software Architecture ๐Ÿ“ฆย 70
Software Development ๐Ÿ“ฆย 68
Software Performance ๐Ÿ“ฆย 57
Software Quality ๐Ÿ“ฆย 127
Text Editors ๐Ÿ“ฆย 45
Text Processing ๐Ÿ“ฆย 131
User Interface ๐Ÿ“ฆย 310
User Interface Components ๐Ÿ“ฆย 465
Version Control ๐Ÿ“ฆย 29
Virtualization ๐Ÿ“ฆย 68
Web Browsers ๐Ÿ“ฆย 38
Web Servers ๐Ÿ“ฆย 25
Web User Interface ๐Ÿ“ฆย 194