Custom HTML documents

Nexo Maker supports fully custom HTML-based components, making it easy to design rich user interfaces for your tools and extensions.

To load external HTML or CSS files into your plugin’s UI, you can use the loadFile() function provided by the API. This is particularly powerful when combined with defineStyle(), which merges your HTML and CSS into a single renderable component.

---

❇️ You may be interested into reading readfile()

🧠 Use Case: Custom-Styled Components

You can pair loadFile() with defineStyle() to render a complete HTML document with CSS styling directly inside the Nexo Maker UI.

💡 Example

const html = await api.nexomaker.loadFile(__dirname + "/doc.html", "utf-8");
const css = await api.nexomaker.loadFile(__dirname + "/style.css", "utf-8");

const styledComponent = await api.nexomaker.defineStyle({
  htmldoc: html,
  styledoc: css
});

api.nexomaker.postSidebarIcon({
  button: "Custom Page",
  key: "custom-page",
  icon: await api.nexomaker.imgconvert(__dirname + "/assets/icon.png"),
  route: "/custom",
  component: styledComponent
});

---

📄 Sample doc.html

<div class="my-doc">
  <h2>Custom Page</h2>
  <p>This UI is built entirely with HTML and styled using a separate CSS file.</p>
</div>

---

🎨 Sample style.css

.my-doc {
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

.my-doc h2 {
  color: #4caf50;
}

---

✅ Benefits of Using loadFile() with defineStyle()

• Modularity: Keep your UI structure and styling cleanly separated.

• Maintainability: Easier to update layout and design without touching JS logic.

• Flexibility: Use the same HTML and CSS in multiple places or expansions.