Creating Blog Posts

Blogs are perfect for tutorials, announcements, and community stories. This guide shows how to create, edit, and delete posts—plus a few safe HTML examples you can paste into the editor.

Create

Dashboard → Posts

Creating a post takes less than a minute. Start from your dashboard, add a title, then write in plain text or HTML.

Open Posts

Go to Dashboard → Posts.

Create a new post

Tap Create Post.

Add a title (and optionally a cover image)

Add a Title and an optional Cover Image.

Write your content

Write content using plain text or HTML.

For a clean “tutorial” feel, use headings, short paragraphs, and spacing blocks (cards/surfaces).

Paste images directly

Paste an image into the editor — it uploads automatically and inserts an <img> tag for you.

Publish

Tap Publish Post.

HTML examples

Want your post to feel more like a tutorial? Use headings, short paragraphs, and lists. Here’s a simple starter template you can copy and paste:

<h2>My headline</h2>
<p>One short paragraph that explains the post.</p>
<ul>
  <li>Bullet 1</li>
  <li>Bullet 2</li>
</ul>
<p><img src="https://..." alt="" /></p>

Tip: you don’t need backticks around image URLs — just use https://....

Simple icons (SVG)

You can also add small icons inside your blog posts using simple inline SVG. This works well for tutorials—icons help readers scan steps quickly without turning the post into a wall of text.

Use a small size (16–18px) and a soft grey stroke for a Lucide‑style look. Here’s a “Home” icon example:

<p>
  Open Mudiera from your home screen
  <svg viewBox="0 0 24 24"
       width="16" height="16"
       fill="none"
       stroke="#9ca3af"
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
       aria-hidden="true">
    <path d="M3 9.5 12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"></path>
  </svg>
</p>

If you want the icon to inherit your text color automatically, swap stroke="#9ca3af" for stroke="currentColor" and then place it inside an element that already has a grey text class. For example:

<p class="text-gray-500">
  Saved to home screen
  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="M3 9.5 12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"></path>
  </svg>
</p>

Note: your sanitizer removes style="", so use existing classes like text-gray-500, bg-gray-50/50, border-gray-100, rounded-2xl, and p-4 instead.

Using existing classes for layout

You can make posts look “designed” (without custom CSS) by using the existing utility classes already in your project:

Good defaults:

Use space-y-4 to add gaps between blocks, mud-surface to create a soft card, and mud-surface-strong for a more prominent panel.

For code samples, wrap with: bg-gray-50/50 border border-gray-100 rounded-2xl p-4 overflow-auto

Here’s a mini “callout card” you can copy:

<div class="mud-surface p-5 space-y-2">
  <p class="text-gray-900 font-bold">Tip</p>
  <p class="text-gray-700">
    Keep paragraphs short and use headings so the post reads like a tutorial.
  </p>
</div>

Edit

Need to fix a typo or update details? You can edit any post you’ve published.

Open your post in the dashboard, tap Edit, make your changes, then tap Update Post.

Delete

If you no longer need a post, you can delete it from the dashboard.

Open your post in the dashboard and tap Delete.

Deletions are permanent (stored in the database).

What the editor looks like

Here’s a quick preview of the blog editor screen:

Write a blog post + paste images — step by step