Examples
If this is your first time using Luna, consider checking out the Get Started page.
Barebones Luna instance
The most barebones Lunajs instance. The following JavaScript code generates everything you see below:
new Lunajs().init({
'targetElement': document.getElementById('example-one')
});
Luna Artboard Preview
Luna Artboard is currently still in development but will eventually allow Luna users to store all their
Luna projects in one place, offline, locally, for free. For now, it's a great example of how Luna can be
leveraged in more advanced scenarios, such as when applying to jobs and generating unique cover letters
for each job application. The following JavaScript code uses the LunaArtboard.js script:
new LunaArtboard().init(
'<div>Dear [Name of Hiring Manager]:</div><div>I would like to express my sincere interest in entering a position as an employee at your company.</div><div>As a recent graduate with experience in one, two, and three, I believe I am a strong candidate for the posted position.</div><div>You mentioned in the listing that you are looking for someone with strong [blank] skills and a [character trait]. As a [program] major at the University of Toronto, a member of [club name], and have multiple side projects with source code available upon request, I have become a skilled programmer with evidence of valuable experience.</div><div>My [list skills and traits] and eagerness to enter the technology business will make me an excellent employee. I would love to begin my career with your company and am confident that I would be a beneficial addition to [company name].</div><div>I have attached my resume to this message and I will call within the following week to try and arrange a time to speak together.</div><div>Thank you so much for your time and consideration.</div><div>Sincerely,</div><div>[Your name]</div><a href="mailto:email@mail.com">Email: email@mail.com</a><a href="tel:5555555555">Cell: (555) 555-5555</a><a href="https://linkedin.com/" target="_blank">LinkedIn</a>',
document.getElementById('example-two')
);
Simple Luna instance with Initial Content
There are multiple parameters you can pass to the initializer to simplify the Luna interface. You can also set the initial content using an HTML string or DOM element. The following JavaScript code generates everything you see below:
new Lunajs().init({
'targetElement': document.getElementById('example-two'),
'initialContent': '<h1>A simple instance of Luna.</h1><h2>It supports multiple text boxes.</h2><img src="https://images.unsplash.com/photo-1639793677434-b7c29536388a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" title="And even images!" alt="And even images!">',
'disableLaunchpad': true,
'hideSizeButtons': true,
'hideExportButton': true
});
Simple Luna instance with Components
You can pass components in an appropriately-named array to the initializer, and they'll show up in the Component Library. The following JavaScript code generates everything you see below:
new Lunajs().init({
'targetElement': document.getElementById('example-three'),
'hideSizeButtons': true,
'hideExportButton': true,
components: [
new Component({ name: 'Heading 1', innerHTML: '<h1>A simple instance of Luna.</h1>'}),
new Component({ name: 'Heading 2', innerHTML: '<h2>It supports multiple text boxes.</h2>'}),
new Component({ name: 'Image', innerHTML: '<img src="https://images.unsplash.com/photo-1639793677434-b7c29536388a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" title="And even images!" alt="And even images!">'})
]
});
Simple Luna instance with Components added after initialization
Don't forget that you can also call Lunajs methods programmatically. Instead of passing in the components to the initializer, you can add each component using a function. The following JavaScript code generates the same instance as the previous example:
const lunaInstance = new Lunajs().init({
'targetElement': document.getElementById('example-four'),
'hideSizeButtons': true,
'hideExportButton': true
});
lunaInstance.addComponent(new Component({ name: 'Heading 1', innerHTML: '<h1>A simple instance of Luna.</h1>'}));
lunaInstance.addComponent(new Component({ name: 'Heading 2', innerHTML: '<h2>It supports multiple text boxes.</h2>'}));
lunaInstance.addComponent(new Component({ name: 'Image', innerHTML: '<img src="https://images.unsplash.com/photo-1639793677434-b7c29536388a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" title="And even images!" alt="And even images!">'}));
Simple Luna instance with Custom Control
You can programmatically add controls to the interface using Lunajs.addControl(). Since the
callback can be any function, the possibilities are infinite. The following JavaScript code generates
everything you see below:
const lunaInstance = new Lunajs().init({
'targetElement': document.getElementById('example-four'),
'disableLaunchpad': true,
'hideSizeButtons': true,
'hideExportButton': true
});
lunaInstance.addControl({
name: 'my-awesome-controls',
'aligned': 'left',
controls: [
{
'label': 'My Control',
'callback': () => alert('Pressed my awesome control.'),
'setActive': true
}
]
})