1. Get started

YJS is greatly simplifies things like generating an HTML page, conveniently modifying and injecting its DOM elements, handling events, and many other conveniences with an easy-to-use API that works across multiple browsers. With its combination of versatility and extensibility, YJS is changing the way many people write JavaScript applications...

HTML Create a Simple HTML Document with YJS

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>YJS Example</title>

        <link rel="stylesheet" href="style.css">
        
        <script type="text/javascript" src="https://cdn.yurba.one/static/yjs/1.0/js/yjs.min.js"></script>
    </head>
    <body>
        <div id="main"></div>

        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

<!-- index.html -->

JavaScript Let's move on to the page code itself in index.js

import { header } from "./header.js";
import { footer } from "./footer.js";

async function main() {
    await header();
	
    yjs.render(
        `<p>page</p>`
    )
	
    await footer();
}

main();

// index.js

You can import any css/js files that can be used to display the navbar or parts of the page.

We don't recommend using css/js imports for all your assets as it can significantly slow down your page load time.
Instead, you can download them separately via html. If there must be some condition for thi - use our yjs.import function.

yjs.import('{file url}')

JavaScript

Imports files into the <head> element in the document. It is recommended to use await mode, because if you import files that are dependent on each other, errors may occur.

yjs.render(`{html code}`, '{element | selector}')

JavaScript

Appends html code to the end of the {element}

2. Full usage

JavaScript Example using yjs.render method

Let's add the appropriate words to the header.js and footer.js files for example output, but you can fill them with full pages or parts of them.

export const header = async() => {
    // fetch api simple yjs usage example,
    // you can use each method as you wish
    await fetch("auth.php")
    .then((response) => response.json())
    .then((data) => {
        if(data.success == true){
            yjs.render(
                `<p>you're logged in</p>`
            )
        }
    })
	
    yjs.render(
        `<p>header imported<p>`
    )
}
	
// header.js

export const footer = async() => {
    // This module will be loaded last,
    // since we called it last. So it's best to load 
    // stylesheets and js files in the header or in index.js
    yjs.render(
        `<p>footer imported</p>`
    )
}

// footer.js

At the output we get this:

you're logged in
header imported
page
footer imported

<!-- 127.0.0.1:80/index.html -->

JSFiddle Example (very simplified)

3. Highlighting

If you want to use code highlighting: es6-string-html (VSCode)

YurbaJS

1. Get started

2. Full usage

3. Highlighting