Next Generation Language
HyScript is a lightweight and dynamic server-side framework that allows you to easily create and serve web pages using .hs files written in JSON format.
- Serve
.hsfiles as JSON-based templates for web pages. - Dynamic HTML generation with custom metadata, title, and content.
- Minimal setup with an Express.js-based server.
To use HyScript, first, initialize a Node.js project and install the package.
npm init -y
npm install hyscript-latestIn your project directory, create an index.js file to set up and run your HyScript server.
const HyScript = require('hyscript-latest');
const hy = new HyScript();
// Set the directory containing `.hs` files
hy.set('./pages');
// Public Directory
hy.static('public')
// Start the server on a specific port
const PORT = 3000;
hy.start(PORT, 'HyScript server is running!'); Create a folder in your project root named pages. This is where you will store your .hs files.
Each .hs file is a JSON file containing metadata and content for your web page. The .hs file structure allows you to define the page's title, meta description, logo, and whether Tailwind CSS should be included, followed by the actual HTML content.
{
"title": "Home Page",
"meta": "Welcome to our homepage.",
"logo": "/favicon.ico",
"tailwindcss": true
}
<!---Content--->
<h1>Welcome to HyScript!</h1>
<p>This is a dynamic page.</p>{
"title": "About Us",
"meta": "Learn more about our company.",
"logo": "/logo.png",
"tailwindcss": false
}
<!---Content--->
<h1>Hello, This is your HyScript Example Page. Change this in about.hs!</h1>
<p>Welcome to the page. Customize the content as per your needs.</p>In the example above:
- The JSON section contains metadata like the
title,meta,logo, and whether to include Tailwind CSS. - The HTML content comes after
<!---Content--->and will be rendered on the page.
-
Navigate to your project directory:
cd /path/to/your/project -
Start the server:
node index.js
-
Open your browser and visit:
http://localhost:3000/hometo see thehome.hspage.http://localhost:3000/aboutto see theabout.hspage.
You Can Either Use Example Website Editor at Vscode for HS
Your project folder should look like this:
/project
|-- /pages
| |-- home.hs
| |-- about.hs
|
|-- index.js
|-- package.json
|-- node_modules/
Visiting http://localhost:3000/home will render:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to our homepage.">
<title>Home Page</title>
<link rel="icon" href="/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1>Welcome to HyScript!</h1>
<p>This is a dynamic page.</p>
</body>
</html> Visiting http://localhost:3000/about will render:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn more about our company.">
<title>About Us</title>
<link rel="icon" href="/logo.png">
</head>
<body>
<h1>Hello, This is your HyScript Example Page. Change this in about.hs!</h1>
<p>Welcome to the page. Customize the content as per your needs.</p>
</body>
</html> .hsfiles must be valid JSON and contain at leasttitle,meta, andcontent.- If
tailwindcssis set totrue, the CDN for Tailwind CSS will be included in the page. - Ensure the directory you pass to
.set()contains your.hsfiles.
We welcome contributions to HyScript!
Feel free to submit issues or pull requests to enhance the functionality.
HyScript is released under the MIT License.
Enjoy using HyScript for your next-generation web projects! 🚀