https://github.com/dna-dom/dna-dom
🧬 An uncomplicated user interface library for cloning semantic templates (with TypeScript declarations)
https://github.com/dna-dom/dna-dom
clone dom html jamstack javascript json-data template-engine typescript ui
Last synced: 5 days ago
JSON representation
🧬 An uncomplicated user interface library for cloning semantic templates (with TypeScript declarations)
- Host: GitHub
- URL: https://github.com/dna-dom/dna-dom
- Owner: dna-dom
- License: mit
- Created: 2013-03-28T05:03:59.000Z (about 13 years ago)
- Default Branch: main
- Last Pushed: 2026-03-03T05:53:59.000Z (about 2 months ago)
- Last Synced: 2026-04-01T07:57:37.546Z (26 days ago)
- Topics: clone, dom, html, jamstack, javascript, json-data, template-engine, typescript, ui
- Language: TypeScript
- Homepage: https://dna-dom.org
- Size: 5.43 MB
- Stars: 126
- Watchers: 12
- Forks: 43
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# dna-dom
_An uncomplicated user interface library for cloning semantic templates_
[](https://dna-dom.org/license)
[](https://www.npmjs.com/package/dna-dom)
[](https://www.jsdelivr.com/package/npm/dna-dom)
[](https://github.com/dna-dom/dna-dom/actions/workflows/run-spec-on-push.yaml)
[](https://github.com/dna-dom/dna-dom/actions/workflows/publish-website.yaml)
dna-dom is a lightweight easy-to-use UI library enabling developers to rapidly build maintainable
JavaScript applications.
The project name stems from its primary function of cloning DOM templates.
## A) Bookstore Example
Designate templates with the `dna-template` class, and put the templates directly into the HTML
of your web page.
Use the element's `id` to indicate the name of the template.
Enclose data fields in double tildes `~~`.
### 1. HTML for book template
```html
Featured Books
~~title~~
Author: ~~author~~
```
Then call the `dna.clone()` function to insert a copy of the template into the DOM.
The supplied JSON data object populates the fields of the template.
### 2. JavaScript call to add book node
```javascript
dna.clone('book', { title: 'The DOM', author: 'Jan' });
```
The new clone element replaces the template.
The original template is detached from the DOM and kept for additional cloning.
### 3. Resulting HTML with clone
```html
Featured Books
The DOM
Author: Jan
```
Need to clone the template multiple times?
Simply pass an array of data objects into the `dna.clone()` function.
## B) Additional Information
* [https://dna-dom.org](https://dna-dom.org/) (see the *"Try it out"* section for an interactive example)
* [Sample To-Do Application](https://jsfiddle.net/4jkua81f) (jsfiddle)
* [Introduction to dna-dom](https://youtu.be/1CrYAFZPdAg) (YouTube)
* [Documentation](https://dna-dom.org/docs)
* [Release Notes](https://github.com/dna-dom/dna-dom/wiki/Release-Notes)
## C) Contributor Notes
To be a contributor, **fork** the project and run the commands `npm install` and `npm test` on your
local clone.
Make your edits and rerun the tests.
Pull requests welcome.
Since the pacakge version number is updated during the release process, you can leave the version number unchanged.
## D) Build Environment
Check out the `runScriptsConfig` section in [package.json](package.json) for an
interesting approach to organizing build tasks.
**CLI Build Tools for package.json**
- 🎋 [add-dist-header](https://github.com/center-key/add-dist-header): _Prepend a one-line banner comment (with license notice) to distribution files_
- 📄 [copy-file-util](https://github.com/center-key/copy-file-util): _Copy or rename a file with optional package version number_
- 📂 [copy-folder-util](https://github.com/center-key/copy-folder-util): _Recursively copy files from one folder to another folder_
- 🪺 [recursive-exec](https://github.com/center-key/recursive-exec): _Run a command on each file in a folder and its subfolders_
- 🔍 [replacer-util](https://github.com/center-key/replacer-util): _Find and replace strings or template outputs in text files_
- 🔢 [rev-web-assets](https://github.com/center-key/rev-web-assets): _Revision web asset filenames with cache busting content hash fingerprints_
- 🚆 [run-scripts-util](https://github.com/center-key/run-scripts-util): _Organize npm package.json scripts into groups of easy to manage commands_
- 🚦 [w3c-html-validator](https://github.com/center-key/w3c-html-validator): _Check the markup validity of HTML files using the W3C validator_
---
Feel free to submit questions at:
[github.com/dna-dom/dna-dom/issues](https://github.com/dna-dom/dna-dom/issues)
dna-dom is open source under the [MIT License](https://dna-dom.org/license).
The website and documentation are published under the
[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0) license.