Get started

Fragmenium setup is very easy. You can start with either CDN or NPM.

Want to build everything yourself? Use the CDN and follow the simple steps below.

Prefer a ready-made project? Run npm create fragmenium 📝 and get a full starter with all files and folders set up instantly.

Version 1.0

NPM 
        npm fragmenium 📝
CDN 
        https://www.cdn.com/fragmenium.engine.js 📝

Table of content

CDN setup

  1. Paste the CDN link in the <head> of every page.
  2. Create a file named reference.js.
  3. Write static content HTML JSON+LD Breadcrumb and meta data in your pages; keep fragment settings in reference.js.

That’s it—Fragmenium handles routing, fragment loading and logic. You focus on content, design and interactivity.

Reference

  1. Create a file named reference.js (an ES-module).
  2. Declare and fill an object: 
    const ref = {};copy
  3. Export it: 
    export { ref };copy

You need to mention fragments absolute path and fragment type in the ref object

We will discuss in every fragment section how, why and when which fragment should you need to use.

📜 Note

Don't use relative path as a fragment reference

Anchor Links

The link is a very important element in Fragmanium. Links in Fragmanium are of two types:

Internal Links

A link without the target attribute in the a tag is considered internal. These types of links will open the page by routing without a page reload.

<a href="/dev/demo.html">Demo</a>copy

📜 Note

Do not use an external link without target=""; otherwise, the Fragmenium engine will try to route it and an error will occur.


External Links

Any link in an a tag with the target attribute is considered an external link, and the fragment engine will not interrupt it. When you want to share an external link, you must use the target attribute. 


      <a href="https://copilot.microsoft.com" target="">Copilot</a>
      
      copy

📜 Note

If you use the target attribute with an internal link, it will also lose routing and fragmenium engine's interception, and the page will open with a reload.

JS Execution

The Fragmenium engine executes JavaScript inside an iframe, ensuring that JavaScript code does not pollute the global context and guaranteeing 100% cleanup. When selecting the global object or performing DOM manipulation from within the iframe, a prefix such as top.document is required. However, if you execute JavaScript as a JS fragment, Fragmenium solves the prefix problem. JS fragments in Fragmenium are wrapped with with(top){/* js code */}, which means you don’t need to mention top. You can write and execute JavaScript code seamlessly.

Because a JS fragment is executed within its own scope, there are slight differences. For example, if you want to run an async task, you can directly use await since a JS fragment is already inside an async function.

Fragmenium provides a global function called cleanup();. This function clears all executed JS fragments and re-executes all related HTML, CSS, and JS fragments according to reference.js.

Import

Fragmenium is designed for reusable code and for sharing the same code across multiple pages. Most of the time, you will not need to use the import module for reusability. However, if you really need to use modules, you can use Dynamic Import. Static imports will not work in Fragmenium because, as mentioned, Fragmenium executes JS Fragments in a function scope, and static imports do not work inside any scope. 

        const { meta } = await import(`/meta.js`);copy

In a JavaScript module that you want to export, you need to use the prefix top to access the global object of the application. Otherwise, you will get the iframe’s object instead of the application’s. In a JS Fragment, you can access the application’s global object without mentioning the prefix, but under the hood, the Fragmenium engine uses the top prefix to access the application’s global object. 

        const input = top.document.querySelector("input").value.toLowerCase();
    export { input };copy

📜 Note

Always use an absolute path for import. Do not use relative paths anywhere in Fragmenium.