Table of contents


1. Documentation
  1.1 How to build a website
    1.1.1 Drag n' Drop builder
    1.1.2 Virtual Machines
    1.1.3 HTML editor
    1.1.4 MailKit newsletters
    1.1.5 Node.js playground
    1.1.6 Domains
    1.1.7 Security
    1.1.8 Policy generator
  1.2 Creating a custom 404 page

Documentation

Here, we will cover what all of our products do, and how to use them.



How to build a website

Here we'll cover a short description of all 9 products to build your website with, how to use them, and some examples. Feel free to use the right sidebar to quickly navigate the docs.

Drag n' Drop builder

Our Drag n' Drop builder is famous for being sleek, simple, and flawless.

Here, we will cover how to use it, what it does, and an example of it.

How to use it

First of all, let's clear up a few things before we precede:

  • Blocks are sections of content that can be placed anywhere on an empty part of your page. You can change their global settings, like width/height and color

  • Elements are the structural parts that make up your website. You drag them into blocks. These elements include text, images, links, and more

Now, to build your website:

  1. Navigate to the Drag n' Drop builder on your Dashboard

  2. Select the website you want to create this new page on. If you don't already have one, click and choose a name

  3. Wait for the editor to load, then select the page you would like to edit (located on the sidebar). If you want to create another page, click and name the page

  4. If the page is empty, a template of blocks will automatically load into the editor. To add blocks, click "+ Block" on the toolbar. Now you can also change the block's width, height, and other settings

  5. Now, drag some elements (e.g. text, images, buttons) into the target block. The elements are located on the left of the toolbar. The type of elements you choose is up to you since it's your website

  6. When you are done making changes to the page, click at the right of the utilities section (in the toolbar). This will filter the content and put it live on your website

What does it do?

The Drag n' Drop builder is one of the most thought-out ideas for Simple Builder. When we had the idea to create this amazing project, the first thing we thought was building a no-brainer Drag n' Drop builder. This editor allows users to simply add blocks to their page, add elements to it to create content, and instantly publish it.


Tip: Need help with this feature? Go to our forum, support page, or contact us



Virtual Machines

We offer incredible, fast, and reliable Virtual Machines that run right in your browser.

Here, we will cover how to use it, what it does, and an example of it.

How to use it

So, obviously, the Virtual Machines here are not a no-brainer like the Drag n' Drop builder. The reason is because it requires you to know at least some Linux, know how to navigate a file system, and can write in multiple markup and programming languages. We have still tried to make this product as simple and flawless as possible though.


This Virtual Machine comes with every user's account for free. It runs completely in your browser. Here are the specs of it:

  • Operating system: Linux Raspberry Pi Bullseye OS (Debian 11)

  • RAM: 4GB

  • Storage: 10kB

To use your Virtual Machine:

  1. Navigate to the Virtual Machine on your Dashboard

  2. Select the website that you want to use the Virtual Machine to build with

  3. Now, you can open files on your Virtual Machine, use the pre-installed Visual Studio Code editor, and run Linux commands

What does it do?

The cloud Virtual Machine is a lightweight Raspberry Pi computer that allows you to do tasks instantly. This machine comes pre-installed with most of the basic Linux commands (and more), Visual Studio Code, and your website builder's tools for creating your website using this machine.


Tip: Need help with this feature? Go to our forum, support page, or contact us



HTML editor

This HTML editor is a full-screen version of your Virtual Machine's Monaco editor.

Here, we will cover how to use it, what it does, and an example of it.

How to use it

This editor comes with highlighting support for 10+ code languages, including HTML, CSS, JavaScript, Python, SQL, pHp, and more. The HTML editor is also very easy to navigate.


Now, to use your HTML editor:

  1. Navigate to the HTML editor on your Dashboard

  2. Select the website that you want to build using the HTML editor

  3. By default, the editor will open your home page (index.html). To select, create, or delete a page, use the keyboard shortcut O or ⌘ O, or by clicking "Open" on the toolbar

  4. After selecting the page you want to edit, enter your code and save the page by using the keyboard shortcut S or ⌘ S, or by clicking "Save" on the toolbar

What does it do?

This HTML editor is a lightweight Monaco-based editor for any developer who wants to code their website through their browser.


Tip: Need help with this feature? Go to our forum, support page, or contact us



MailKit newsletters

The original MailKit was designed by Simple Mailer, where it originally started. This idea has been integrated into Simple Builder and upgraded with many new features.


MailKit is a newsletter-based service, where users can set email send dates, email templates, recipients, and more to setup an automated newsletter without any additional work.

Here, we will cover how to use it, what it does, and an example of it.

How to use it

MailKit is pretty straightforward when is comes to setup. You usually just follow the dialog walkthrough on the page.


To set up MailKit newsletters:

  1. Navigate to MailKit on your Dashboard

  2. Click on the page to add a new newsletter

  3. Name the sender for these newsletters

  4. Add the send dates for each newsletter (for example, if you're having a Black Friday sale, date 1 would be 11/25/23, and if you're also having a New Years sale, date 2 would be 1/1/24)

  5. Upload the templates for each date (for example, for date 1 you would upload a Black Friday email template in HTML form, and for date 2 you would upload a New Years email template)

  6. After uploading each file, you will be prompted to enter the designated title for that newsletter

  7. Finally, add the recipients of this newsletter (the people it will be sent to). Now, you have two options for this. Option 1 is manual recipients where you enter each specific email address individually. Option 2 is to set it to "Automatic" recipients which will link the newsletter to a form and have users sign up to the newsletter

  8. Your MailKit newsletter is set up. Wait for it to send to your recipients. Note that if you set the recipient type to "Automatic", you will copy the numerical service ID of this newsletter and use it when creating a MailKit form on the Drag n' Drop builder

What does it do?

MailKit was an idea originated from Simple Mailer. The idea was to create a fast, customizable service for users to send newsletters "hands free" to their customers. This is where MailKit came along, and now it has more features than before.


Tip: Need help with this feature? Go to our forum, support page, or contact us



Node.js playground

We also have a Node.js playground built into your account. This playground allows you to run Node.js directly from your browser.


This playground runs on Runkit and uses files from your Virtual Machine to run Node.js and build your website.

Here, we will cover how to use it, what it does, and an example of it.

How to use it

Now, to use the Node.js playground:

  1. Navigate to Node.js playground on your Dashboard

  2. Wait for the IDE, terminal, and preview box to load

  3. To use the code editor, select the file you want to edit on your Virtual Machine using the keyboard shortcut O or ⌘ O, or by clicking "Open" on the toolbar

  4. To use the preview box, simply select the file you want to run using the previous method, and click in the preview box to execute the Node.js code in the file

  5. To use the Node.js-based terminal, type your Node.js on the line and press "Enter" when you're done to execute the code

What does it do?

The Node.js playground is a simple product where users can edit/save files, select them, and run Node.js directly from your browser, and use a Node.js-based terminal at the same time. This product is run off of Runkit's cloud NPM service.


Tip: Need help with this feature? Go to our forum, support page, or contact us



Domains

Simple Builder provides simple, free subdomains for your website, with the ability to also connect your own domain that you already purchased.

Here, we will cover how to use it, what it does, and an example of it.

How to use it

Now, to use our Domains:

  1. Navigate to the Domains product on your Dashboard

  2. Click to start creating a new domain

  3. Follow the dialog walkthrough next. Select the type of domain you want (free subdomains provided by Simple Builder, or connect your own custom domain)

  4. If you selected "Use our free subdomain", select the website you want to connect this domain to, then enter the custom subdomain that you want to use. Your domain will be set up automatically and may take up to 24 hours to activate the domain + the TLS certificate

  5. If you selected "Use your own domain", select the website you want to connect this domain to, then enter the domain name that you purchased from somewhere else. Add the IPv4 address 185.199.108.153 in your domain's DNS settings and wait for changes to propagate. Once you're done, click "Finish" on the dialog and your domain should activate automatically

What does it do?

Simple Builder Domains is a lightweight product that allows users to instantly connect a domain to their website in literal seconds. Setting up our free built-in subdomains is easier and faster than ever.


Tip: Need help with this feature? Go to our forum, support page, or contact us



Security

Security on your website is fully powered by Simple Secure, our community-trusted security provider.


Simple Secure allows you to fully customize the security settings on your website, including DoS/DDoS protections, SQL injections filters, CLickjacking defense, and XSS attack prevention.

Here, we will cover how to use it, what it does, and an example of it.

How to use it

To use Simple Secure on your website:

  1. Navigate to the Security product on your Dashboard

  2. Click to add a new security option

  3. Follow the dialog walkthrough next. Select the type of attack you want to defend your website from, the level of security, and then click "Next" to finish

  4. To change a security option's settings, simply create a new option with the same defense type and change its options

What does it do?

Simple Secure is a community trusted security product built by Simple Builder. It has lightweight server framework, instant security, and it is always ready to defend against attacks on your website.


Tip: Need help with this feature? Go to our forum, support page, or contact us



Policy generator

Simple Builder has a Policy generator that only takes 3 clicks to build a Terms of Service, Privacy Policy, Cookie Policy, or License.


We also offer 4 different types of licenses: MIT, GPL 3.0, Apache License 2.0, and a CC-BY license for your project. You can generate all of these in a few clicks on your Policy generator.

Here, we will cover how to use it, what it does, and an example of it.

How to use it

To use the Policy generator:

  1. Navigate to the Policy generator on your Dashboard

  2. Click on a blank option to select which policy you'd like to create

  3. Follow the dialog walkthrough next. Select the type of policy you want, and select its strength. You can edit this policy later, don't worry. Your policy will then be created

What does it do?

The Policy generator product is a simple service that unlike other policy generators, already has all of the information it needs from your website, so it only takes a few clicks to create a policy.


Tip: Need help with this feature? Go to our forum, support page, or contact us



Creating a custom 404 page

You can easily create a custom 404 page for your website. A 404 "not found" page is the default page that shows when the user stumbles upon one that doesn't exist.


Here are the steps:

  1. Choose which interface you'd like to use to create your page (e.g. The Drag n' Drop Builder, Virtual Machine, HTML editor)

  2. Create the page. To do this on the Drag n' Drop builder, click from the left sidebar. To do this on the HTML editor and Virtual Machine, use O or ⌘ O then click

  3. Next, the editor will prompt you to name the page/file. Name your page "404.html". Simple Builder will automatically remove the default 404 page for your website and replace it with this

  4. Once you're done naming the page, close the dialog and wait for the page to appear. Use your editor/interface of choice and add content to your 404 page