<p align="center"> <img src="https://raw.githubusercontent.com/dataformsjs/static-files/master/img/logo/DataFormsJS-144px.png"> </p>

🌟 Welcome to DataFormsJS!

Thanks for visiting! 🌠👍

<table> <tbody> <tr align="center"><td colspan="2"> 🌐 &nbsp; 🌎 &nbsp; 🌏 &nbsp; 🌍 </td></tr> <tr> <td><a href="https://github.com/dataformsjs/dataformsjs/blob/master/docs/i18n-readme/README.zh-CN.md">中文 (简体)</a> </td> <td><a href="https://github.com/dataformsjs/dataformsjs/blob/master/docs/i18n-readme/README.zh-CN.md">欢迎来到 DataFormsJS</a></td> </tr> <tr> <td><a href="https://github.com/dataformsjs/dataformsjs/blob/master/docs/i18n-readme/README.es.md">Español</a> </td> <td><a href="https://github.com/dataformsjs/dataformsjs/blob/master/docs/i18n-readme/README.es.md">Bienvenido a DataFormsJS</a></td> </tr> <tr> <td><a href="https://github.com/dataformsjs/dataformsjs/blob/master/docs/i18n-readme/README.pt-BR.md">Português (do Brasil)</a> </td> <td><a href="https://github.com/dataformsjs/dataformsjs/blob/master/docs/i18n-readme/README.pt-BR.md">Bem vindo ao DataFormsJS</a></td> </tr> <tr> <td><a href="https://github.com/dataformsjs/dataformsjs/blob/master/docs/i18n-readme/README.ja.md">日本語</a> </td> <td><a href="https://github.com/dataformsjs/dataformsjs/blob/master/docs/i18n-readme/README.ja.md">DataFormsJSへようこそ</a></td> </tr> </tbody> </table>

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; and it was written and used over many years prior to its release. As of 2024 has been used in a variety of applications and websites and is extremely stable and contains many unit tests.

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

💫 Why use DataFormsJS?

|<img src="https://raw.githubusercontent.com/dataformsjs/website/master/public/img/icons/fast.svg" alt="Faster Development" width="60">|<img src="https://raw.githubusercontent.com/dataformsjs/website/master/public/img/icons/small-size.svg" alt="Small Size" width="60">|<img src="https://raw.githubusercontent.com/dataformsjs/website/master/public/img/icons/light-switch.svg" alt="Easy to Learn" width="60">| |---|---|---| |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.|

|<img src="https://raw.githubusercontent.com/dataformsjs/website/master/public/img/icons/column.svg" alt="Stability" width="60">|<img src="https://raw.githubusercontent.com/dataformsjs/website/master/public/img/icons/water.svg" alt="Flexibility" width="60">|<img src="https://raw.githubusercontent.com/dataformsjs/website/master/public/img/icons/star.svg" alt="Better Sites" width="60">| |---|---|---| |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|<img src="https://raw.githubusercontent.com/dataformsjs/website/master/public/img/logos/react.svg" alt="React" width="64"><div>React</div>|<img src="https://raw.githubusercontent.com/dataformsjs/website/master/public/img/logos/vue.svg" alt="Vue" width="64"><div>Vue</div>|<img src="https://raw.githubusercontent.com/dataformsjs/website/master/public/img/logos/handlebars.png" alt="Handlebars" width="64"><div>Handlebars</div>|<img src="https://raw.githubusercontent.com/dataformsjs/website/master/public/img/logos/graphql.svg" alt="GraphQL" width="64"><div>GraphQL</div>|<img src="https://raw.githubusercontent.com/dataformsjs/website/master/public/img/logos/preact.svg" alt="Preact" width="64"><div>Preact</div>|and more!| |---|---|---|---|---|---|---|

|Learn something new!|<div><img src="https://raw.githubusercontent.com/dataformsjs/website/master/public/img/logos/web-components.svg" alt="Web Components" width="64"></div><div>Web Components</div>| |---|---|

🚀 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.

<p align="center"> <img src="https://raw.githubusercontent.com/dataformsjs/static-files/master/img/screenshots/dataformsjs-start-page.png" alt="DataFormsJS npm start page"> </p>

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

dataformsjs
├── docs
│
├── examples
│   ├── *.htm
│   └── server.js
│
└── js
│   ├── DataFormsJS.js
│   ├── react\*.js
│   ├── web-components\*.js
│   └── *\*.js
│
├── scripts\*.js
│
├── server\*.js
│
├── test
│    ├── *.htm
│    └── server.js
│
└── server\app.js

Develop online using the code playground: https://www.dataformsjs.com/en/playground

<p align="center"> <img src="https://raw.githubusercontent.com/dataformsjs/static-files/master/img/screenshots/Playground.png" alt="Code Playground"> </p>

Download a template file using scripts from a CDN: https://www.dataformsjs.com/en/getting-started

<p align="center"> <img src="https://raw.githubusercontent.com/dataformsjs/static-files/master/img/screenshots/Getting-Started-Templates.png" alt="Getting Started Templates"> </p>

📄 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">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>DataFormsJS Example using Vue</title>
    </head>
    <body>
        <header>
            <nav>
                <a href="#/">Home</a>
                <a href="#/data">Data Example</a>
            </nav>
        </header>

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

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

        <template id="loading-screen">
            <h2>Loading...</h2>
        </template>

        <script
            type="text/x-template"
            data-engine="vue"
            data-route="/data"
            data-page="jsonData"
            data-url="https://www.dataformsjs.com/data/geonames/countries"
            data-load-only-once
            data-lazy-load="jsonData, flags"
            data-countries>

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

        <!-- Vue 2 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

        <!-- Vue 3 -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/vue@3.2.30/dist/vue.global.prod.js"></script> -->

        <!-- DataFormsJS -->
        <script src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/DataFormsJS.min.js"></script>
        <script>
            app.lazyLoad = {
                jsonData: 'https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/pages/jsonData.min.js',
                flags: 'https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css',
            };
            app.settings.lazyTemplateSelector = '#loading-screen';
        </script>
    </body>
</html>

📄 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">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>DataFormsJS Example using React</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css">
    </head>
    <body>
        <div id="root"></div>

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

            function ShowError(props) {