NextHtml simplifies your work by allowing you to avoid repetitive HTML writing. Using the syntax <Element+Number>, you can render multiple elements in a single line. It supports custom element syntax like <p3>, <div2>, <img3>, etc.
html, React, Next.js And javaScripts Applications
NextHtml Install Via CDN Link
https://cdn.jsdelivr.net/gh/ikrar24/nexthtml-cdn@1.0.2/NextHtml.js
NextHtml Install in Node js
npm i -g nexthtml-jsNextHtml Install in Rect/Next js
npm i nexthtml-react (comming soon)If you use the CDN link (not recommended for production), you can include it with the <script> tag:
<script src="https://cdn.jsdelivr.net/gh/ikrar24/nexthtml-cdn@1.0.2/NextHtml.js"></script>Note: Do not use the CDN link for deployment; use it only for practice.
This is the best option for SEO optimization. To use NextHtml in Node.js, create an input.html file where you write NextHtml syntax. Then, use the provided commands (listed below) to generate an output.html file (you can customize the name), which will be your deployable file.
Run Commands
Note:- Note: First, create an HTML file (e.g., index.html) where you write your NextHtml code. Then, use the commands below to process it for deployment output.
Command 1: Read Your input.html File
nexthtml-js --read index.html --make output.html
or
nexthtml-js --r index.html --m output.htmlHere, index.html is the file where you write your NextHtml code, and output.html is the deployment file generated by NextHtml. You can name the output file anything you want.
Command 2: Automatically Read and Update input.html on Changes
nexthtml --read index.html --make output.html --wacth
or
nexthtml --r index.html --m output.html --wThis command automatically runs the code and updates the output file whenever changes are made.
NextHtml for React will be even more useful and is coming soon (expected 3 days after the NextHtml release).
| Attribute | Type | Use Case | Description |
|---|---|---|---|
<pNum> (for Element) |
Number | <p3></p3> |
Renders the specified number of elements based on the number provided after the element (e.g., <p3> renders 3 <p> tags). See example: Click. |
baseid |
String | id="example" |
Assigns IDs to all created elements with an index appended (e.g., exampleId1, exampleId2). See example: Click. |
changeid |
String + Array + JSON | changeid='["firstId","secondId","thirdId"]' |
Assigns specific IDs to elements based on the provided array, following their index. See example: Click. |
baseclass |
String | class="exampleClass" |
Assigns classes to all created elements with an index appended (e.g., exampleClass1, exampleClass2). See example: Click. |
changeclass |
String + Array + JSON | changeclass='["firstClass","secondClass","thirdClass"]' |
Assigns specific classes to elements based on the provided array, following their index. See example: Click. |
text |
String + Array + JSON | text='["paragraph1","paragraph2"]' |
Renders text content for each element based on the provided array, following their index. See example: Click. |
src |
String | src="example.com" |
Applies the same src attribute to all elements. See example: Click. |
alt |
String | alt="logoImg" |
Applies the same alt attribute to all elements. See example: Click. |
changealt |
String + Array | changealt='["logo","background"]' |
Assigns specific alt attributes to elements based on the provided array. See example: Click. |
changesrc |
String + Array + JSON | changesrc='["ikrar.com","example.com"]' |
Assigns specific src attributes to elements based on the provided array. See example: Click. |
title |
String | title="name" |
Applies the same title attribute with an index appended to all elements (e.g., name1, name2). See example: Click. |
changetitle |
String + Array + JSON | changetitle='["name","password","email"]' |
Assigns specific title attributes to elements based on the provided array. See example: Click. |
placeholder |
String | placeholder="Name" |
Applies the same placeholder to all elements. Use changeplaceholder instead. See example: Click. |
changeplaceholder |
String + Array | changeplaceholder='["Enter Name","Enter Email"]' |
Assigns specific placeholder attributes to elements based on the provided array. See example: Click. |
loading |
String | loading="lazy" |
Applies the same loading attribute to all elements. See example: Click. |
changeloading |
String + Array + JSON | changeloading='["lazy","eager"]' |
Assigns specific loading attributes to elements based on the provided array. See example: Click. |
type |
String | type="text" |
Applies the same type attribute to all elements (not recommended). See example: Click. |
changetype |
String + Array + JSON | changetype='["text","password","email"]' |
Assigns specific type attributes to elements based on the provided array. See example: Click. |
The number following an HTML element determines how many elements are rendered (e.g., <p3>, <a2>, <input5>). Below are examples:
Example 1
<p2></p2>
Example 2
<input3></input3>
Example 2
<li4></li4>
Example 1 Render
<p></p>
<p></p>
Example 2 Render
<input type="text"/>
<input type="text"/>
<input type="text"/>
Example 3 Render
<li><li>
<li><li>
<li><li>
<li><li>
This works the same for all tags.
Note :- For some tags like <img> and <input>, use self-closing tags to avoid rendering issues..
In cases where you use container elements like <div>, <ul>, or <section>, you can use and include other elements inside.
<div2>
<p>lorem<p>
</div2>
Render
<div>
<div>
<p>lorem</p>
</div>
</div>
This applies to other container elements similarly.
When using <Element+Number>, the specified number of elements is created at runtime. If you assign a class (e.g., class="className"), it renders as className1, className2, etc.
Input
<div4 class="divClass">
<p2 class="paragrapghClass"></p2>
</div4>
Render Output
<div class="divClass1">
<div class="divClass2">
<div class="divClass3">
<div class="divClass4">
<p class="paragrapghClass1"></p>
<p class="paragrapghClass2"></p>
</div>
</div>
</div>
</div>
Defination :- Here, <div4> creates 4 <div> containers, and <p2> inside it renders paragraphs within the
You can use in css with this class name.
To assign different classes to multiple elements created in a single line, use the changeclass attribute with an array of class names: changeclass='[""]'.
Input
<p3 changeclass='["firstClass","secondClass","thirdClass"]'></p3>
Render Output
<p class="firstClass"></p>
<p class="secondClass"></p>
<p class="thirdClass"></p>
Remider:- After =, use single quotes ' and write a valid JSON or array like [""].
note:- Ensure the array is valid JSON or array.
If you leave an array element empty (e.g., ["","secondClass"]), no class is assigned to that element.
Input
<li3 changeclass='["","secondClass","thirdClass"]'></li3>
Render Output
<li ></li>
<li class="secondClass"></li>
<li class="thirdClass"></li>
The baseid works similarly to baseclass, appending an index to the ID.
Input
<input3 id="inputId"></input3>
Render Output
<input id="inputId1">
<input id="inputId2">
<input id="inputId3">
note:- Use changeid recommonded
Use changeid to assign specific IDs to multiple elements in a single line.
Input
<input3 changeid='["fristId","secondId","thirdId"]'></input3>
Render Output
<input id="firsttId">
<input id="secondId2">
<input id="thirdId3">
For elements like <img> and <input>, use self-closing tags or wrap them in a container.
Example of self Clsosing:-
<img2></img2>
<input2><input2>
Example of wrap in Container
<div>
<img2>
<input2>
</div>
Use the text attribute to set the inner HTML of elements.
Input
<p3 text='["This is 1st paragrapgh","This is 2nd paragrapgh","This is 3rd paragrapgh"] ></p3>
Render Output
<p>This is 1st paragrapgh</p>
<p>This is 2nd paragrapgh</p>
<p>This is 3rd paragrapgh</p>
When using src on valid elements like <img>, <audio>, or <video>, it applies the same src to all elements.
Input
<audio3 src="example.mp3"></audio3>
Render Output
<audio src="example.mp3"></audio>
<audio src="example.mp3"></audio>
<audio src="example.mp3"></audio>
Use this if you want the same source for all elements.
Use changesrc to assign different sources to valid src elements.
Input
<video4 changesrc='["Introvideo.mp4","Examplevideo.mp4","herovideo.mp4","outrovideo.mp4"]'></video4>
Render Input
<video src="Introvideo.mp4"></video>
<video src="Examplevideo.mp4"></video>
<video src="herovideo.mp4"></video>
<video src="outrovideo.mp4"></video>
When using alt on valid elements like <img>, it applies the same alt to all elements.
Input
<img2 alt="images"></img2>
Input
<img alt="images">
<img alt="images">
Use changealt to assign specific alt attributes to elements based on their index.
Input
<img2 changealt='["logo","backgraunds"]'></img2>
Render Output
<img alt="logo">
<img alt="backgraunds>
Using loading applies the same loading attribute to all elements.
Input
<img5 loading="lazy"></img5>
Render Output
<img loading="lazy">
<img loading="lazy">
<img loading="lazy">
<img loading="lazy">
<img loading="lazy">
Use changeloading to assign specific loading attributes to elements.
Input
<img2 changeloading='["lazy","normal"]'><img2>
Render Output
<img loading="lazy">
<img loading="normal">
Using title applies the same title with an index to all elements.
Input
<input3 title="messages"><input3>
Render Output
<input title="messages"><input>
<input title="messages"><input>
<input title="messages"><input>
Use changetitle to assign specific title attributes to elements.
Input
<input3 type="text" changetitle='["name","password","email"]'><input3>
Render Output
<input type="text" title="name">
<input type="text" title="password">
<input type="text" title="email">
Using type applies the same type attribute to all elements.
Input
<imput6 type="text"></input6>
Render Output
<imput type="text">
<imput type="text">
<imput type="text">
<imput type="text">
<imput type="text">
<imput type="text">
Use changetype to assign specific type attributes to elements in a single line.
input
<input4 changetype='["text","password","email","number"]'></input4>
input
<input type="text">
<input type="password">
<input type="email">
<input type="number">
Using placeholder applies the same placeholder to all elements.
Input
<input2 placehoder="Enter Name"></input2>
Render Output
<input placehoder="Enter Name">
<input placehoder="Enter Name">
Use changeplaceholder to assign specific placeholder attributes to elements based on their index.
Input
<input2 changeplaceholder='["Enter Name","Enter Password"]'></input2>
Render Output
<input placeholder="Enter Name">
<input placeholder="Enter Password">
Remainder:- When using NextHtml's change attributes, after =, use single quotes ' ' and provide an array or JSON object like [""].
Input Demo
<from id="userFrom">
<input4
changetype='["text","password","number","email"]'
changeclass='["fullName","userPassword","userNumber","userNumber"]'
changeplaceholder='["Enter Name","Enter Password", "Enter Number","Enter Email"]'
></input4>
<button class="submitBtn"> Submit </button>
</from>
<script>
const userName = document.querySelector(".fullName");
const userPassword = document.querySelector(".userPassword");
const userNumber = document.querySelector(".userNumber");
const userEmail = document.querySelector(".userEmail");
const form = document.getElementById("userFrom");
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = [{
name: userName.value,
password: userPassword.value,
number: userNumber.value,
email: userEmail.value
}];
console.log(formData);
});
<srcript>
Input Demo
<form id="userFrom">
<input type="text" class="fullName" placeholder="Enter Name">
<input type="password" class="userPassword" placeholder="Enter Password">
<input type="number" class="userNumber" placeholder="Enter Number">
<input type="email" class="userEmail" placeholder="Enter Email">
<button type="submit" class="submitBtn">Submit</button>
</form>
<script>
const userName = document.querySelector(".fullName");
const userPassword = document.querySelector(".userPassword");
const userNumber = document.querySelector(".userNumber");
const userEmail = document.querySelector(".userEmail");
const form = document.getElementById("userFrom");
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = [{
name: userName.value,
password: userPassword.value,
number: userNumber.value,
email: userEmail.value
}];
console.log(formData);
});
<srcript>
Copyright 2025 Ikrar
You can use NextHtml freely and openly, but you may not copy or modify the code.