https://github.com/victorqribeiro/TinyJS Skip to content Navigation Menu Toggle navigation Sign in * Product + Actions Automate any workflow + Security Find and fix vulnerabilities + Codespaces Instant dev environments + GitHub Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code Explore + All features + Documentation + GitHub Skills + Blog * Solutions By size + Enterprise + Teams + Startups By industry + Healthcare + Financial services + Manufacturing By use case + CI/CD & Automation + DevOps + DevSecOps * Resources Topics + AI + DevOps + Security + Software Development + View all Explore + Learning Pathways + White papers, Ebooks, Webinars + Customer Stories + Partners * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Enterprise + Enterprise platform AI-powered developer platform Available add-ons + Advanced Security Enterprise-grade security features + GitHub Copilot Enterprise-grade AI features + Premium Support Enterprise-grade 24/7 support * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up Reseting focus You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} victorqribeiro / TinyJS Public * Notifications You must be signed in to change notification settings * Fork 4 * Star 113 Tiny JS is a lightweight JavaScript utility for dynamically creating HTML elements License MIT license 113 stars 4 forks Branches Tags Activity Star Notifications You must be signed in to change notification settings * Code * Issues 0 * Pull requests 0 * Actions * Projects 0 * Security * Insights Additional navigation options * Code * Issues * Pull requests * Actions * Projects * Security * Insights victorqribeiro/TinyJS This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. master BranchesTags Go to file Code Folders and files Name Name Last commit message Last commit date Latest commit History 16 Commits LICENSE LICENSE README.md README.md tiny.js tiny.js View all files Repository files navigation * README * MIT license TinyJS TinyJS is a lightweight JavaScript library for dynamically creating HTML elements with deep property assignment. It simplifies DOM manipulation by allowing you to generate any standard HTML tag programmatically, apply properties, append content, and select DOM elements with ease. Features * Dynamically create HTML elements: Generate any standard HTML tag with ease. * Deep property assignment: Supports nested property structures for complex elements. * Simplified content appending: Accepts strings or elements as child content. * DOM element selection: Use $ and $$() to select elements from the DOM. How It Works TinyJS attaches functions for each HTML tag (like div, span, a, etc.) to the global window object. You can create elements by simply calling the tag name as a function, passing in optional properties and child elements. Additionally, TinyJS introduces two new helper functions: * $: A wrapper around document.querySelector, simplifying DOM element selection. Example: const post = $('#post_1'); // Selects the element with id 'post_1' * $$(): A wrapper around document.querySelectorAll that returns an array of DOM elements, allowing for easy iteration. Example: const items = $$('.item'); // Selects all elements with class 'item' items.forEach(item => { console.log(item); }); Example const myDiv = div( {id: 'container', className: 'my-class'}, h1('Hello World'), p('This is a dynamically generated paragraph.') ); document.body.appendChild(myDiv); In this example, the div, h1, and p elements are created dynamically with their attributes and content specified as arguments. Usage 1. Include the tiny.js script in your project. 2. Use any valid HTML tag as a function to create elements, assign properties, and append children. 3. Use $ to select a single DOM element and $$() for multiple elements. 4. Append the created elements to the DOM. Installation Simply include the tiny.js file in your project: Advanced Example You can deeply assign properties to elements: const styledButton = button( {style: {backgroundColor: 'blue', color: 'white'}, onclick: () => alert('you clicked me')}, 'Click Me!' ); document.body.appendChild(styledButton); In this example, the button element is styled directly using the style property. Supported Tags TinyJS supports a wide range of HTML tags, including: * Basic text elements: p, span, strong, em, etc. * Interactive elements: button, input, select, etc. * Media elements: img, audio, video, etc. * Container elements: div, section, article, footer, etc. Contribution Make sure to open an issue before submitting a PR. This README was generated by ChatGPT About Tiny JS is a lightweight JavaScript utility for dynamically creating HTML elements Resources Readme License MIT license Activity Stars 113 stars Watchers 1 watching Forks 4 forks Report repository Releases 2 Remove deprecated function Latest Sep 14, 2024 + 1 release Packages 0 No packages published Contributors 2 * @victorqribeiro victorqribeiro Victor Ribeiro * @gabrielsroka gabrielsroka Gabriel Sroka Languages * JavaScript 100.0% Footer (c) 2024 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact * Manage cookies * Do not share my personal information You can't perform that action at this time.