You can import any JS modules by name with import module from 'module-name' , where module-name is the module's name on [npm](https://www.npmjs.com/). In the background, primo turns that into a request to [Skypack](https://skypack.dev/) that looks like
import module from 'https://cdn.skypack.dev/module-name'.Skypack is a CDN that sends visitors pre-optimized packages.
Additional values related to the component can be found under a variable named primo . primo contains three properties:
id is the component's unique ID. Typically used to select the component's node.
data contains the component's field values
fieldscontains the component's fields
Sometimes you'll need to call a function from your HTML
<button onclick="doSomething()">click</button>
To do so, you'll need to define the function globally from the component's JS
window.doSomething = function() {}
To avoid overwriting a global function (especially when reusing a component), create a global namespace using the component's ID.
Fields let you easily change content inside HTML from the CMS side.
Create a field
From within the Component Editor, click the Fields tab
Add a field, selecting a field type based on the data type
Repeater: Lists
Group: Objects
Content: Markdown
Switch: Boolean
Text, Number, URL
Give the new field a label and an ID
Label: Labels the input field in the CMS
ID: Used from within the component's HTML to access the field value
Connect field to HTML
primo uses the [Handlebars](https://handlebarsjs.com/) compiler to build HTML from field values. Once you create a field, you can access their values from within the component HTML using the field's ID.
Some handlebars features like partials aren't supported yet
<!-- This assumes we created and populated a repeater field with the ID of `nav` -->
{{#each nav}}
<a href="{{url}}">{{title}}</a>
{{/each}}
<!-- Since this field produces html, we'll need to wrap it in three brackets -->
<!-- 'primo-copy' gives the div the same copy styles as copy rows on the page -->
<div class="primo-copy">
{{{ page_content }}}
</div>
{{#if show_contact}}
<address>
<a href="mailto:jon@doe.com">jon@doe.com</a><br>
<a href="tel:+13115552368">(311) 555-2368</a>
</address>
{{else}}
<h1>Unfortunately, we're currently unavailable for hire</h1>
{{/if}}