Register first to build an app

Go to https://appsemble.app/_/register, register your e-mail address with a corresponding password. Please note, when entering your organization, it is not possible to change this to another organization name afterwards.

Press ‘Register’.

A confirmation email is then sent. Did you not receive a confirmation e-mail? It is possible that this ends up in the spam box. After confirming it is possible to log in, enter your specified e-mail and password. Then press login.

After logging in you are in the library, where all created applications are stored.

Create an app – video tutorial

Watch the video and create your application in 4 minutes. Turn on the subtitle for the instructions.

Create your application step by step

After you have logged in, click on “Press here to create a new app” to create an app.
You then enter the “create new App” window.

Name – Enter a unique name for the application here.
Description – description for the application and / or functions of the app.

Choose a template

For our example, we choose “Empty App” as a template.

Create a low-code application in our SAAS | Appsemble


Press ‘Create‘ to create the application. The low-code editor is opened.


Copy the code below and paste it in the ‘Recipe‘ from line 2 (under Name) to the ‘description‘. Please note, to keep the application working, the first line with ‘Name:’ may not be copied over.

defaultPage: News
theme:
  themeColor: '#000000'
pages:
  - name: News
    blocks:
      - type: markdown
        version: 0.7.0
        parameters:
          content: |
            ![My city](https://api.appsemble.com/files/2b063b5cd19b46c0a85b1de80d70872d)
            # Header
            ### Header smaller
            You can write text here:

            Visit the <a target="_blank" href="https://appsemble.com">website</a>

Press ‘preview‘, the first page of your app is now visible. It is now possible to add your own ‘content’. Examples of different headers, text and link text can be found in the ‘Recipe‘ under ‘content’. If necessary, work with HTML code in the Markdown language, to add your own images and other applications.

Low code editor, creat your application in the markdown app

Add new page

Add the resulting code in the ‘Recipe‘ to create a new page. Copy and paste this between the last ‘content’ line and ‘description‘. Note the number of spaces in the code. YAML uses spaces to determine which properties belong to an object (such as a page). A space too many or too few can mean that the code is not valid.

  - name: My Video page
    blocks:
      - type: markdown
        version: 0.7.0
        parameters:
          content: |
            # My video
            Look at our new video! This is **awesome**, I hope *you like it*.
  
            <a href="https://youtu.be/q0B4jPYop1c
            " target="_blank"><img src="https://s3.dexerto.com/thumbnails/_thumbnailLarge/youtube-logo-thumbnail-change-experiment.jpg" 
            alt="IMAGE ALT TEXT HERE" width="240" height="180" border="3" /></a>
  
            You can also **look** at my other video. This one is max width
  
            [![IMAGE ALT TEXT HERE](https://s3.dexerto.com/thumbnails/_thumbnailLarge/youtube-logo-thumbnail-change-experiment.jpg)](https://youtu.be/eBvQH9Rp-s8)

Surround bold texts with the following characters ** and italic texts with the _ character. Do you want to use your own video content on the page? Change the current URLs (image and video link) to your own content.

Dit is het resultaat als de code goed geimplementeerd is.

Example tables

Insert the code below between the last ‘content‘ line and ‘description‘ line.

  - name: My tables
    blocks:
      - type: markdown
        version: 0.7.0
        parameters:
          content: |
            ## Tables

            Colons can be used to align columns.

            | Tables        | Are           | Cool  |
            | ------------- |:-------------:| -----:|
            | col 3 is      | right-aligned | $1600 |
            | col 2 is      | centered      |   $12 |
            | zebra stripes | are neat      |    $1 |

            There must be at least 3 dashes separating each header cell.
            The outer pipes (|) are optional, and you don't need to make the 
            raw Markdown line up prettily. You can also use inline Markdown.

            Markdown | Less | Pretty
            --- | --- | ---
            *Still* | `renders` | **nicely**
            1 | 2 | 3

‘Press ‘Preview‘. Via the navigation menu on the top left you will find an overview of all your pages.

Use tables to convey clear information. Then press ‘Publish’. The application is now stored in the library.

Download the App to your device

Go to your ‘Library’, press view. Copy the link, send it to a smart phone and open it in a browser. After opening the URL, you will be asked to save this as an app. After this step, the created application icon will appear on your device.

Save the application in your phone.

Style your application

Add your own colors to your application through CSS in the Core style or shared CSS tabs.

What is the difference:
Core style applies to parts of Appsemble that are present in every application, such as the menu, the toolbar and the background.
Shared CSS applies to both the Appsemble ‘core’ and the building blocks.

Add the CSS code (code below) in the ‘Core style‘ window. Press ‘Preview‘ to see the changes.

.navbar.is-primary {
  background-color: #96ed6a;
  color: azure;
}

#app {
  background-color: #eaf9e3;
}

Use a color picker to style your application.

Support

Found an error code? or do you get stuck while editing? Complete the form below and our developers are happy to help you.

Full code

defaultPage: News
theme:
  themeColor: '#000000'
pages:
  - name: News
    blocks:
      - type: markdown
        version: 0.7.0
        parameters:
          content: |
            ![My city](https://api.appsemble.com/files/2b063b5cd19b46c0a85b1de80d70872d)
            # Header
            ### Header smaller
            You can write text here:

            Visit the <a target="_blank" href="https://appsemble.com">website</a>
  - name: My Video page
    blocks:
      - type: markdown
        version: 0.7.0
        parameters:
          content: |
            # My video
            Look at our new video! This is **awesome**, I hope *you like it*.

            <a href="https://youtu.be/q0B4jPYop1c
            " target="_blank"><img src="https://s3.dexerto.com/thumbnails/_thumbnailLarge/youtube-logo-thumbnail-change-experiment.jpg" 
            alt="IMAGE ALT TEXT HERE" width="240" height="180" border="3" /></a>

            You can also **look** at my other video. This one is max width

            [![IMAGE ALT TEXT HERE](https://s3.dexerto.com/thumbnails/_thumbnailLarge/youtube-logo-thumbnail-change-experiment.jpg)](https://youtu.be/eBvQH9Rp-s8)
  - name: My tables
    blocks:
      - type: markdown
        version: 0.7.0
        parameters:
          content: |
            ## Tables

            Colons can be used to align columns.

            | Tables        | Are           | Cool  |
            | ------------- |:-------------:| -----:|
            | col 3 is      | right-aligned | $1600 |
            | col 2 is      | centered      |   $12 |
            | zebra stripes | are neat      |    $1 |

            There must be at least 3 dashes separating each header cell.
            The outer pipes (|) are optional, and you don't need to make the 
            raw Markdown line up prettily. You can also use inline Markdown.

            Markdown | Less | Pretty
            --- | --- | ---
            *Still* | `renders` | **nicely**
            1 | 2 | 3