Getting started with Malla

What is Malla?

Malla is a place to store and update the text in your website or app. Rather that having your text buried deep in some code that needs a developer to update, bring it out into Malla where it's easy to update.

Unlike a traditional CMS, which is focused on articles and posts and pages, Malla can handle all of the text for your site. From text like this getting started guide, to button text, tooltips, even the text shown in the browser tab. It all has a home in Malla.

How does it work?

Text that you enter into Malla is stored in the cloud. You (or your nearest friendly web developer) then retrieve that text via an API and incorporate it into your website. The 'API' is actually just a single URL that returns all the text you need for your site. Once your site is configured to retireve text from Malla, any change you make in Malla will be reflected in your site instantly.

Starting out

In this guide, we'll go through the process of using Malla for the fictional site "The Grand Tourist".

You can see that it's made up of a title, an introduction, and 8 smaller pieces of text. Note that the introduction contains some italics and a hyperlink.

Completed grand tourist site

The workspace

Once you have signed in, you will be taken straight to your workspace. Malla only has one interface to learn, and this is it! From here you can manage 'projects' and 'screens' and view the API details.

But let's begin at the beginning and add some text.

Completed grand tourist site

Entering text

To add a text item in Malla, simply click and drag (make sure that you have the 'Text' tool selected, not the 'Labels' tool).

An important concept in Malla is that when it comes time to update your text, perhaps weeks or months from now, it should be easy to find the piece of text you want to update. This is why Malla allows you to arrange your text on a canvas, rather than adding records to a database.

Malla workspace

Editing existing content

  • To edit text, click on an existing text item; you will see a blue border and a flashing cursor, you can type directly into this box. Click anywhere else on the screen to deselect the text item.
  • To move a text item, click and drag anywhere on the text box when it's not in edit mode.
  • To resize a text item, hover your mouse over a text item and four 'handles' will appear. You can click and drag these handles to resize the item.
Malla workspace

A note on arranging text

When you have added several boxes and arranged them in a way that makes it clear where each piece of text belongs, your screen may look something like this.

The way that you arrange your text is Malla will help you update it, but has no effect on how the text will appear in your website - that's up to the website designer.

Malla workspace

Formatting text

Double click any text item to open the details panel.

To format your text, you will use a special syntax called 'markdown' to create bold, italics, hyperlinks, etc. For example, to indicate that you want a word to be bold, put two asterisks on either side **like this**.

In this image you can see what the text looks like without formatting.

You can click formatting help to get help with markdown.

(Fun fact: all of the text in the Malla site is written in Malla using markdown.)

Malla workspace

Preview formatting

You can click the Preview button to see how your text will look, or just hover for a sneak a peek.

The formatting that you see in that preview is a rough indication of how your text will appear in your website. The output is simply HTML, which can be styled however you like. For example, in the preview, hyperlinks are shown blue and underlined, but in your website the web designer may have defined a style that shows all hyperlinks as red with no underline.

Malla workspace

Take it to the limit

If you look at the finished Grand Tourist site, you'll notice that the headings "Adventure", "Relaxing", etc. fit nicely in their boxes. If you were to change the text to something too long, it may disrupt the design of the site. To protect against this, Malla let's you set a limit for the maximum number of characters allowed in a text item. This can always be changed later, it is just there to prevent mistakes.

Malla workspace

Projects and screens

Malla allows you to have multiple projects and screens. Our fictional travel site only has a single page, but perhaps your site has more. Perhaps you have more than one site.

You would typically have one project to represent each app or website. Many users only ever need one project.

A screen is a way of organising your text items. For example, you might have one screen for your home page and another screen for a help page. How you arrange your text across screens is up to you; when the text is accessed via the API, all text for a project is returned; no reference is made to the screen that the text is on.

Malla workspace

Accessing the data

All of the text in your project can be accessed via a single URL (an 'API endpoint').

Click on the API details button near the top right of the screen to find out what that URL is. Here you can also see a preview of the data. If someone other than you will be connecting your website to Malla, that URL is all they need. Here's what the data will look like for The Grand Tourist.

Given this URL, a web developer will be able to access the data and incorporate that text into your site. Exactly how this is done varies widely from website-to-website, so we won't be covering that here.

Malla workspace