> For the complete documentation index, see [llms.txt](https://docs.nuken.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nuken.xyz/options-customization/templates/developing-templates.md).

# Developing templates

{% hint style="info" %}
If you'd like to develop a template manually, this guide is for you. Otherwise, you can use the new [**Template Export** **Menu**](/the-basics/exporting-your-project/save-as-template.md).
{% endhint %}

Developing a nuken Template is easy. We've included the default template file `welcome_to_nuken.js` as an example below - let's take a look.

```
var welcome_to_nuken = { 

title: "Welcome to nuken!",

codename: "welcome_to_nuken",

icon: "welcome_to_nuken.png",

location: 'On this device',

online: false,

secure: true,

visit: "https://nuken.xyz",

description: 
`
Not sure where to begin? Check out this template. It's a neat little demo, showing you what nuken has to offer. Feel free to add your own code, or borrow ours for your own project - the sky's the limit.

`,

stylebox_selection:'css3_sheet',

style: `body, html {
background-color:red;
color:white;
}

h1 {
font-family:Courier;
text-align:center;
padding:5%;
}`,

markup:'<h1>Welcome to nuken!</h1>',

meta:`<meta charset = 'UTF-8'>&#10;
<meta name='viewport' content='width=device-width, initial-scale=1.0'>`,

scriptbox_selection:'javascript_lang',

script:`window.onclick = function(){

console.log('This is console.log');
console.warn('This is console.warn');

//This will fail, check the console!
alert(variable);

};`,

view:'welcome_to_nuken.js',

};

push_template(welcome_to_nuken);
```

![This is the output.](/files/B0p7uMQcOWIXeG2LARMO)

{% hint style="info" %}
Pretty much what you're doing here is defining a JS object, and pushing it to the **Templates Menu** via the `push_template` function.
{% endhint %}

### Required properties

{% hint style="warning" %}
These are most definitely required, we're not messing around.  Your content will not function without them. 😐
{% endhint %}

> **`codename`** -  Set this string to whatever you've called your declared template object. For example, set `codename` to `welcome_to_nuken` if you're eventually going to `push_template(welcome_to_nuken)`. This just ensures that nuken can create page elements using the name of your template object.

> **`icon`** - The location of your template/s preview icon. nuken begins looking in the `content/templates` directory, so relative file paths are allowed here.

> **`style`** - Whatever's entered here will be written to the code box for inline styling.

> **`script`** - Whatever's entered here will be written to the code box for scripts.

> **`markup`** - Enter the project's HTML or other markup here, and it will be written to the markup code box.

### Optional properties

{% hint style="info" %}
Feel free to add these if you'd like. Some are recommended even if they're not required. 😎

Setting some of these properties to `false` has the same effect as leaving them out entirely; so as a general rule of thumb, if you don't want it, just ignore the property.&#x20;
{% endhint %}

> **`title`** - The name of your template, as it will appear in the **Templates Menu.**

> **`location`** -  Your template's location. Is it on the user's device? Was it fetched from an online location?&#x20;

> **`online`** - Does your template make use of any resources that require an internet connection? If so, set this to `true.` Otherwise set it to `false`.

> **`secure`** - If your resource is located on the user's device, or is fetched from an `https` location, let users know by setting this to `true.` Otherwise this is `false`.

> **`visit`** - Enter a URL the user can visit when they click "Visit Creator". This could be your homepage, or a nuken Shop page.

> **`description`** - Tell us about your template. This will show up as your template's description in the **Templates Menu**.

> **`stylebox_selection`** - If your template makes use of a resource that isn't just plain CSS, enter its `codename` here. If you're not sure what a resource's `codename` is, [read this](/the-menus/stylesheet-management/resource-codenames.md).&#x20;

> **`meta`** - If your project makes use of custom `meta` tags, input them here. This information will show up in the **Project** **Config Menu**.

> **`scriptbox_selection`** - If your template makes use of a resource that isn't just plain JavaScript, enter its `codename` here. If you're not sure what a resource's `codename` is, [read this](/the-menus/script-management/resource-codenames.md).&#x20;

> **`donate`**- Enter a URL the user can visit when they click "Donate". This could be a link to a donation page. If you don't have a donation page, leave this string blank.

> **`view`** - When the user clicks "View" in the **Templates Menu,** this is the page they will see. Enter the link (or file path) to your template file. Remember, nuken starts looking in the `content/templates` directory (where your template pack file will be located).

> **`audience`** - If your template project has its own target audience, this information is written to the proper input box in the **Project** **Config Menu**.&#x20;

> **`author`** -   If your template project has its own author, this information is written to the proper input box in the **Project Config Menu**.&#x20;

> **`import_description`** - If your template project has its own description, this information is written to the proper input box in the **Project** **Config Menu.** This "shoutout" is displayed onscreen when someone imports your project. For more information about **Project** **Config Menu** options, [read this](/the-menus/project-config-menu.md).

{% hint style="info" %}
Make sure you've called `push_template` when you've finished defining the object. nuken will not show any new templates in the **Templates Menu** if you only define it!
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.nuken.xyz/options-customization/templates/developing-templates.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
