Get Started with CoconutJS


Installation
Script tag Link the built files directly in your HTML: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nuvemx/coconutjs@latest/dist/coconutjs.css"> <script type="module" src="https://cdn.jsdelivr.net/npm/@nuvemx/coconutjs@latest/dist/index.js"></script>
After loading the script tag, all components are automatically registered with the browser's Custom Elements API. You can start using them immediately in your HTML.
Prevent Flash of Unstyled Content
Add this to your <head> to hide page elements before they are defined: <style>application-page:not(:defined){display:none}</style>
Hello World — Minimal Page
The simplest way to get started. Create an HTML file and add a header and a page: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My CoconutJS App</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nuvemx/coconutjs@latest/dist/coconutjs.css"> <style>application-page:not(:defined){display:none}</style> <script type="module" src="https://cdn.jsdelivr.net/npm/@nuvemx/coconutjs@latest/dist/index.js"></script> </head> <body> <application-header logo-image="images/logo.png"></application-header> <application-page pageId="home"> <h3>Hello, CoconutJS!</h3> <display-paragraph>Welcome to your first CoconutJS page.</display-paragraph> </application-page> </body> </html>
Hello World — Full Layout with Navigation
Build a multi-page app with a sidebar menu and footer: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My CoconutJS App</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nuvemx/coconutjs@latest/dist/coconutjs.css"> <style>application-page:not(:defined){display:none}</style> <script type="module" src="https://cdn.jsdelivr.net/npm/@nuvemx/coconutjs@latest/dist/index.js"></script> </head> <body> <application-header logo-image="images/logo.png"></application-header> <application-menu label="My App"> <application-menu-option icon="bx-home" pageId="home" label="Home" status="active"></application-menu-option> <application-menu-option icon="bx-info-circle" pageId="about" label="About"></application-menu-option> </application-menu> <application-page pageId="home"> <h3>Home</h3> <display-paragraph>Welcome to the home page.</display-paragraph> <display-note title="Tip">Click the menu icons to switch pages.</display-note> </application-page> <application-page pageId="about" display="none"> <h3>About</h3> <display-paragraph>Built with CoconutJS Web Components.</display-paragraph> </application-page> <application-footer brand="MyApp" copyright="MyApp Inc."> <a href="#">Home</a> <a href="#">About</a> </application-footer> </body> </html>
Next Steps Explore all available components and see live demos: Browse components


Components



<application-header logo-image="images/coconutjs-64x64.png"></application-header>

<application-menu label="My menu"> <application-menu-option icon="bx-grid-alt" pageId="option 1 page" label="Option 1" status="active"> </application-menu-option> <application-menu-option icon="bx-data" pageId="option 2 page" label="Option 2"> </application-menu-option> </application-menu>

Example

About Contact

<application-footer brand="MyApp" copyright="MyApp Inc." logo="images/coconutjs-minimal-16x16-transparent.png" brand-description="A great application"> <a href="/about">About</a> <a href="/contact">Contact</a> <a slot="social" href="https://github.com/"><i class="bx bxl-github"></i></a> </application-footer>

Example

<input-checkbox-field label="My checkbox input field" value="checkvalue"></input-checkbox-field>

Example

<input-number-field label="My number input field" value="1234"></input-number-field>

Example

<input-textarea-field label="Description" placeholder="Enter your message..." rows="4"></input-textarea-field>

Example

This is an informational note.

<display-note title="Note">This is an informational note.</display-note>

Examples

Large paragraph text.

Default paragraph text.

Small muted text.

<display-paragraph size="lg">Large paragraph text.</display-paragraph> <display-paragraph>Default paragraph text.</display-paragraph> <display-paragraph muted size="sm">Small muted text.</display-paragraph>

Examples

Visit Example

External Link

Home

<display-link href="https://example.com">Visit Example</display-link> <display-link href="https://example.com" target="_blank">External Link</display-link> <display-link href="/home" icon="bx-home">Home</display-link>

Example

This action cannot be undone.

<display-warning title="Warning">This action cannot be undone.</display-warning>

Example

This is the hidden content that toggles on click.

<display-collapsible title="Know more - Click to expand"> This is the hidden content that toggles on click. </display-collapsible>

Example

<display-table columns='[{"key":"name","label":"Name"},{"key":"age","label":"Age"}]' rows='[{"name":"Alice","age":30},{"name":"Bob","age":25}]' striped hover ></display-table>

Example

<display-image src="images/coconutjs-256x256.png" alt="Profile image" caption="This is a caption"></display-image>

Example
// Declare your function function myFunction(firstNumber, secondNumber) { const sum = param1 + param2; console.log(sum); } // Calling the function myFunction(20, 10);

<display-code language="javascript"> ## THE CODE OF YOUR DISPLAY-CODE BLOCK GOES HERE ## </display-code>

Example

<display-cta title="Get Started" url="/signup" variant="success"></display-cta>

About


CoconutJS is a collection of vanilla JavaScript Web Components for building application UIs. It is an alternative to frameworks like React or Angular, which bring powerful abstractions but also add complexity — a steeper learning curve, more dependencies, and a heavier build process. CoconutJS uses the native Web Components (Custom Elements) standard, so you can build clean, reusable UIs with plain JavaScript and no build step at all.
Zero dependencies, no build tools — drop in a single script tag and start building.









About Browser compatibility