Markdown dan HTML Usage

Panduan ini menjelaskan format Markdown yang didukung di Hexaflate, termasuk beberapa elemen HTML sederhana, placeholder {{}}, fetch JSON HTTP, pemrosesan data, dan regex.

Markdown ini digunakan untuk konten seperti halaman informasi, syarat deposit, slide, bantuan, privacy policy, atau konten custom lain yang dirender oleh aplikasi.

Ringkasan Fitur

Renderer Markdown Hexaflate mendukung:

Markdown dasar seperti heading, bold, italic, list, link, gambar, table, code block, dan blockquote
Beberapa elemen HTML sederhana seperti div, span, p, img, table, details, summary, progress, meter, dan kbd
Komponen native via data-component, seperti grid, menu-item, card, button, badge, alert, image-card, dan carousel
Inline style sederhana untuk warna, background, padding, border, border radius, shadow, alignment, dan layout ringan
GitHub-style task list dan alert box
Footnote sederhana
Math expression sederhana yang dikonversi ke simbol Unicode
Placeholder data user menggunakan {{nama}}, {{kode}}, {{saldo}}, dan lain-lain
Template function menggunakan {{function(...)}}
HTTP fetch JSON/text langsung dari Markdown
Data processing sederhana seperti if, concat, currency, number, contains, dan perbandingan
Regex sederhana seperti regexMatch, regexReplace, dan regexFirst

1. Markdown Dasar

Heading

# Judul H1
## Judul H2
### Judul H3
#### Judul H4

Format Teks

**Teks tebal**
*Teks miring*
***Tebal dan miring***
~~Dicoret~~
`Inline code`

List

- Item pertama
- Item kedua
  - Sub item
  - Sub item lain

1. Langkah pertama
2. Langkah kedua
3. Langkah ketiga

Task List

- [x] Sudah selesai
- [ ] Belum selesai
- [x] ~~Selesai dan dicoret~~

Link

[Website Hexaflate](https://hexaflate.com)

[Email Support](mailto:support@example.com)

<https://hexaflate.com>

Gambar

![Banner Promo](https://example.com/banner.png)

2. Table

| Fitur | Status | Keterangan |
| --- | --- | --- |
| Markdown | Aktif | Bisa digunakan |
| HTML | Aktif | Versi sederhana |
| Template | Aktif | Menggunakan `{{}}` |

Table juga bisa digabung dengan placeholder:

| Data | Nilai |
| --- | --- |
| Nama | {{nama}} |
| Kode | {{kode}} |
| Saldo | {{saldo}} |
| Poin | {{poin}} |

3. Code Block

Gunakan tiga backtick untuk membuat code block.

```dart
final nama = '{{nama}}';
final kode = '{{kode}}';
```

Untuk teks biasa:

```
Ini teks biasa
Tidak ada syntax highlight
```

4. Blockquote dan Alert GitHub

Blockquote Biasa

> Ini adalah blockquote.
>
> Nama user: **{{nama}}**

Alert GitHub

> [!NOTE]
> Informasi tambahan untuk user.

> [!TIP]
> Tips untuk melakukan sesuatu lebih mudah.

> [!IMPORTANT]
> Informasi penting yang harus diperhatikan.

> [!WARNING]
> Peringatan agar user berhati-hati.

> [!CAUTION]
> Risiko atau konsekuensi negatif.

5. HTML Sederhana yang Didukung

Markdown Hexaflate juga bisa menggunakan elemen HTML sederhana.

Format Teks HTML

<b>Tebal</b>
<i>Miring</i>
<u>Underline</u>
<s>Coret</s>
<strong>Strong</strong>
<em>Emphasis</em>
<small>Teks kecil</small>
<code>kode</code>
<mark>Highlight</mark>
<sup>Superscript</sup>
<sub>Subscript</sub>

Warna dan Background

<span style="color: red;">Teks merah</span>
<span style="color: #2196F3;">Teks biru</span>
<span style="background-color: yellow; padding: 2px 8px;">Highlight kuning</span>

Alignment

<p align="left">Rata kiri</p>
<p align="center">Rata tengah</p>
<p align="right">Rata kanan</p>

<div align="center">
  <h3>Konten Tengah</h3>
  <p>Halo {{nama}}</p>
</div>

Gambar HTML

<img src="https://example.com/image.png" alt="Gambar" width="300" />

<img src="https://example.com/avatar.png" alt="Avatar" style="border-radius: 50%; border: 3px solid #2196F3;" />

Card Sederhana

<div style="border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin: 8px 0;">
  <h4>Informasi Member</h4>
  <p><strong>Nama:</strong> {{nama}}</p>
  <p><strong>Kode:</strong> {{kode}}</p>
</div>

Alert Box Custom

<div style="background: #E3F2FD; border-left: 4px solid #2196F3; padding: 12px; margin: 8px 0;">
  <strong>Info:</strong> Saldo Anda saat ini adalah {{saldo}}
</div>

Tombol Link

<a href="https://hexaflate.com" style="background: #2196F3; color: white; padding: 10px 20px; border-radius: 4px; text-decoration: none; display: inline-block;">
  Buka Website
</a>

Navigasi Aplikasi dengan `hexaflate://`

Link di Markdown juga bisa memicu navigasi internal aplikasi menggunakan custom URL scheme hexaflate://. Saat user menekan link tersebut, aplikasi akan langsung menavigasi ke screen yang dituju tanpa membuka browser.

Format:

hexaflate://<action>[/<route>]?<param1>=<value1>&<param2>=<value2>

Contoh Markdown:

[Lihat Riwayat Transaksi](hexaflate://navigate/history)

[Profil Saya](hexaflate://navigate/profile)

[Beli Pulsa](hexaflate://navigate/product?screenTitle=Beli%20Pulsa&hintText=Masukkan%20nomor)

[Bantuan Online](hexaflate://webview?url=https://example.com/help&title=Bantuan)

[Menu Pulsa](hexaflate://menuId?menuId=pulsa-menu-001)

[Buka Google](hexaflate://external?url=https://google.com)

[Kembali](hexaflate://back)

Contoh HTML (dengan styling tombol):

<a href="hexaflate://navigate/history" style="background: #4CAF50; color: white; padding: 10px 20px; border-radius: 4px; text-decoration: none; display: inline-block;">
  Riwayat Transaksi
</a>

<a href="hexaflate://navigate/product?screenTitle=Pulsa&operators=TELKOMSEL" style="background: #2196F3; color: white; padding: 10px 20px; border-radius: 4px; text-decoration: none; display: inline-block;">
  Beli Pulsa Telkomsel
</a>

Action yang didukung:

Action	URL Scheme	Fungsi
`navigate`	`hexaflate://navigate/<route>?<params>`	Buka screen tertentu dengan args
`webview`	`hexaflate://webview?url=...&title=...`	Buka WebView baru
`back`	`hexaflate://back`	Kembali ke screen sebelumnya
`external`	`hexaflate://external?url=...`	Buka URL di browser eksternal
`menuId`	`hexaflate://menuId?menuId=...`	Navigasi ke menu berdasarkan ID

Catatan: Action submenu dan print tidak didukung via hexaflate:// karena membutuhkan data kompleks. Gunakan JavaScript Bridge di WebView untuk action tersebut.

Tips:

URL-encode nilai parameter yang mengandung spasi atau karakter khusus (contoh: Beli%20Pulsa)
Gunakan hexaflate:// untuk navigasi internal, dan URL biasa untuk link eksternal
Parameter query otomatis menjadi routeArgs yang diterima oleh screen tujuan

Details / Summary

<details>
<summary><strong>Lihat Detail User</strong></summary>

| Field | Value |
| --- | --- |
| Nama | {{nama}} |
| Kode | {{kode}} |
| Email | {{email}} |

</details>

Jika ingin terbuka secara default:

<details open>
<summary>Detail Terbuka</summary>
Konten langsung terlihat.
</details>

Progress dan Meter

<progress value="70" max="100">70%</progress> 70% selesai

<progress value="{{poin}}" max="10000">{{poin}}</progress> {{poin}} / 10000 poin

<meter value="0.7">70%</meter> Balance health

Keyboard Key

Tekan <kbd>Ctrl</kbd> + <kbd>C</kbd> untuk copy.

6. Komponen Native dengan `data-component`

Selain HTML biasa, renderer Hexaflate mendukung komponen native Flutter melalui atribut data-component. Format ini lebih stabil daripada CSS kompleks karena tidak bergantung pada browser layout engine.

Grid Responsif

<div data-component="grid" data-columns="4" data-mobile-columns="2" data-gap="18">
  <a data-component="menu-item"
     href="hexaflate://navigate/product"
     data-icon="https://example.com/promo.png"
     data-label="Promo"
     data-border-color="#22c55e">
  </a>

  <a data-component="menu-item"
     href="hexaflate://navigate/product"
     data-icon="https://example.com/pulsa.png"
     data-label="Pulsa"
     data-border-color="#22c55e">
  </a>
</div>

Atribut grid:

Atribut	Fungsi	Default
`data-columns`	Jumlah kolom desktop/tablet	`4`
`data-mobile-columns`	Jumlah kolom saat lebar kecil	mengikuti `data-columns`
`data-gap`	Jarak antar item dalam pixel	`24 18`

Menu Item

<a data-component="menu-item"
   href="hexaflate://navigate/product"
   data-icon="https://example.com/icon.png"
   data-label="Paket Data"
   data-size="72"
   data-icon-size="42"
   data-radius="16"
   data-border-width="2"
   data-border-color="#22c55e"
   data-text-color="#555555">
</a>

Atribut menu item:

Atribut	Fungsi	Default
`href`	Link tujuan, termasuk `hexaflate://`	kosong
`data-icon`	URL gambar icon	kosong
`data-label`	Label menu	teks elemen
`data-size`	Ukuran kotak icon	`72`
`data-icon-size`	Ukuran gambar icon	`42`
`data-radius`	Border radius kotak icon	`16`
`data-border-width`	Ketebalan border	`2`
`data-border-color`	Warna border	warna primary theme
`data-text-color`	Warna teks	warna teks theme

Card dengan Elevation / Shadow

<div data-component="card" data-variant="info" data-elevation="6" data-radius="20" data-padding="18">
  <h3>Informasi Akun</h3>
  <p>Halo {{nama}}, saldo Anda saat ini adalah {{saldo}}.</p>
  <a data-component="button" data-variant="primary" href="hexaflate://navigate/history">Lihat Riwayat</a>
</div>

Atribut card:

Atribut	Fungsi	Default
`data-variant`	`primary`, `secondary`, `success`, `warning`, `danger`, `error`, atau `info`	`primary`
`data-elevation`	Tinggi shadow native	`2`
`data-radius`	Border radius card	`18`
`data-padding`	Padding isi card	`18`
`data-background`	Override warna background	sesuai variant
`data-text-color`	Override warna teks	sesuai variant
`data-border-color`	Override warna border	sesuai variant

Button

<a data-component="button" data-variant="success" href="hexaflate://navigate/deposit">
  Deposit Sekarang
</a>

<a data-component="button" data-variant="outline" href="hexaflate://back">
  Kembali
</a>

Atribut button:

Atribut	Fungsi	Default
`data-variant`	`primary`, `secondary`, `success`, `warning`, `danger`, `error`, `info`, `outline`, atau `ghost`	`primary`
`data-radius`	Border radius tombol	`12`
`data-padding-x`	Padding horizontal	`18`
`data-padding-y`	Padding vertikal	`10`

Badge / Chip

<span data-component="badge" data-variant="success">Aktif</span>
<span data-component="badge" data-variant="warning">Promo Terbatas</span>
<span data-component="badge" data-variant="danger">Penting</span>

Alert Native

<div data-component="alert" data-variant="warning">
  <strong>Perhatian:</strong> Pastikan nomor tujuan sudah benar sebelum transaksi.
</div>

Variant alert sama dengan button dan card: primary, secondary, success, warning, danger, error, atau info.

Image Card

<a data-component="image-card"
   href="hexaflate://navigate/product"
   data-image="https://example.com/banner.jpg"
   data-title="Promo Paket Data"
   data-height="160"
   data-radius="18">
</a>

Atribut image card:

Atribut	Fungsi	Default
`data-image`	URL gambar utama	gambar `<img>` pertama
`data-title`	Teks overlay di bawah gambar	teks elemen
`data-height`	Tinggi card	`150`
`data-radius`	Border radius	`18`

Carousel Horizontal

<div data-component="carousel" data-height="170" data-item-width="280" data-gap="12">
  <a data-component="image-card"
     href="hexaflate://navigate/product"
     data-image="https://example.com/promo-1.jpg"
     data-title="Promo Minggu Ini">
  </a>

  <a data-component="image-card"
     href="hexaflate://navigate/deposit"
     data-image="https://example.com/promo-2.jpg"
     data-title="Bonus Deposit">
  </a>
</div>

Atribut carousel:

Atribut	Fungsi	Default
`data-height`	Tinggi area carousel	`170`
`data-item-width`	Lebar tiap item	`280`
`data-gap`	Jarak antar item	`12`

Catatan penting:

Gunakan URL https:// untuk gambar agar aman di Android.
Untuk layout kompleks, prioritaskan data-component dibanding CSS seperti display:grid, position:absolute, atau CSS animation.
Komponen native otomatis mengikuti theme aplikasi, termasuk dark mode dan warna primary.

7. Badge dan Emoji

Badge bisa menggunakan gambar dari layanan seperti shields.io.

![Status](https://img.shields.io/badge/status-active-success)
![User](https://img.shields.io/badge/User-{{kode}}-blue)
![Points](https://img.shields.io/badge/Points-{{poin}}-orange)

Emoji dan simbol Unicode bisa langsung ditulis:

✅ ❌ ⚠️ ℹ️ 🚀 ⭐ 💡 🔥 💯 ✨ 🎉
→ ← ↑ ↓ ≤ ≥ ∞ √ ∑ π α β γ
Rp € $ ¥ ₩ ₱

8. Placeholder Data User

Gunakan format {{nama_variable}} untuk menampilkan data user.

Halo **{{nama}}**
Kode Anda: `{{kode}}`
Email: {{email}}
Saldo: **{{saldo}}**
Poin: {{poin}}

Daftar placeholder yang tersedia:

Placeholder	Keterangan
`{{nama}}` / `{{name}}`	Nama user
`{{email}}`	Email user
`{{kode}}` / `{{code}}` / `{{user_id}}`	Kode atau ID user
`{{saldo}}` / `{{balance}}`	Saldo terformat
`{{saldo_raw}}` / `{{balance_raw}}`	Saldo angka mentah
`{{komisi}}` / `{{commission}}`	Komisi terformat
`{{komisi_raw}}` / `{{commission_raw}}`	Komisi angka mentah
`{{poin}}` / `{{points}}`	Jumlah poin
`{{alamat}}`	Alamat user
`{{nama_pemilik}}`	Nama pemilik
`{{tgl_daftar}}`	Tanggal daftar mentah
`{{tanggal_daftar}}`	Tanggal daftar terformat

Placeholder bisa digunakan di teks, table, link, gambar, HTML, dan code block.

[Email {{nama}}](mailto:{{email}})

![User](https://img.shields.io/badge/User-{{kode}}-blue)

<span style="color: green;">Saldo: {{saldo}}</span>

9. Template Function Dasar

Selain placeholder biasa, Markdown mendukung function di dalam {{}}.

Format Teks

Nama besar: {{upper(nama)}}
Nama kecil: {{lower(nama)}}
Nama trim: {{trim(nama)}}
Default jika kosong: {{default(email, "Belum ada email")}}
Gabungan: {{concat(nama, " - ", kode)}}

Angka dan Currency

Saldo angka: {{number(saldo_raw)}}
Saldo rupiah: {{currency(saldo_raw)}}
Komisi rupiah: {{currency(komisi_raw)}}

Kondisi

{{if(gt(saldo_raw, 10000), "Saldo cukup", "Saldo kurang")}}

{{if(eq(kode, "OX0001"), "Member utama", "Member biasa")}}

Comparison Operators

Function	Fungsi
`eq(a, b)` / `equals(a, b)`	Sama dengan
`ne(a, b)` / `notEquals(a, b)`	Tidak sama dengan
`gt(a, b)` / `greaterThan(a, b)`	Lebih besar
`gte(a, b)` / `greaterOrEqual(a, b)`	Lebih besar atau sama
`lt(a, b)` / `lessThan(a, b)`	Lebih kecil
`lte(a, b)` / `lessOrEqual(a, b)`	Lebih kecil atau sama
`and(a, b)`	Semua kondisi benar
`or(a, b)`	Salah satu kondisi benar
`not(a)`	Membalik nilai kondisi

Text Check

Email Gmail: {{contains(email, "gmail.com")}}
Kode diawali OX: {{startsWith(kode, "OX")}}
Email diakhiri .com: {{endsWith(email, ".com")}}

10. Fetch JSON dari HTTP API

Markdown bisa mengambil JSON dari API menggunakan fetchJson atau loadJson.

`fetchJson`

fetchJson mengambil JSON lalu langsung menampilkan nilai dari path tertentu.

Nama dari API: {{fetchJson("https://jsonplaceholder.typicode.com/users/1", "name")}}

Format argumen:

{{fetchJson("URL", "path", {headers}, "METHOD", body)}}

Contoh dengan header:

{{fetchJson(
  "https://api.example.com/member/$kode",
  "data.name",
  {"Authorization":"$x_token:$identifier:$key", "X-User":"$kode"}
)}}

Catatan penting:

Argumen pertama adalah URL
Argumen kedua adalah path data yang ingin ditampilkan
Argumen ketiga adalah header
Argumen keempat adalah HTTP method, default GET
Argumen kelima adalah body untuk POST, PUT, PATCH, atau DELETE

Placeholder `$` di URL dan Header

Di dalam URL dan header API, gunakan format $nama_variable, bukan {{nama_variable}}.

{{fetchJson("https://api.example.com/profile?kode=$kode&email=$email", "data.name")}}

Contoh nilai real:

Template	Nilai setelah diproses
`$nama`	John
`$saldo`	Rp 10,000
`$saldo_raw`	10000
`$kode`	OX0001
`$email`	John@example.com

Untuk parameter query angka, lebih aman gunakan nilai raw:

{{fetchJson("https://api.example.com/check?kode=$kode&saldo=$saldo_raw", "status")}}

`loadJson`

loadJson mengambil JSON lalu menyimpannya ke $json. Function ini tidak menampilkan teks langsung, tetapi data bisa dipakai di baris berikutnya.

{{loadJson("https://jsonplaceholder.typicode.com/users/1")}}

Username: **{{$json.username}}**
Email: **{{$json.email}}**
Kota: **{{$json.address.city}}**

Path Nested JSON

Gunakan titik untuk membaca object nested.

{{$json.address.city}}
{{$json.company.name}}

Untuk array, gunakan index angka.

{{$json.items.0.name}}
{{$json.items.1.price}}

11. Fetch Text

Gunakan fetchText jika API mengembalikan teks biasa, HTML fragment, atau response bukan JSON.

{{fetchText("https://api.example.com/notice?kode=$kode")}}

Dengan header:

{{fetchText(
  "https://api.example.com/notice?kode=$kode",
  {"Authorization":"$x_token:$identifier:$key"}
)}}

Format argumen:

{{fetchText("URL", {headers}, "METHOD", body)}}

12. POST, PUT, PATCH, DELETE

Contoh POST JSON:

{{fetchJson(
  "https://api.example.com/check",
  "message",
  {"Content-Type":"application/json", "Authorization":"$x_token:$identifier:$key"},
  "POST",
  {"kode":"$kode", "saldo":"$saldo_raw"}
)}}

Jika body perlu memakai nilai user, gunakan $kode, $saldo_raw, $email, atau variable lain sesuai kebutuhan.

13. Data Processing dari JSON

Setelah loadJson, data $json bisa diproses menggunakan function.

{{loadJson("https://jsonplaceholder.typicode.com/users/1")}}

Username: **{{$json.username}}**
Display name: **{{if(eq($json.username, "Bret"), "John Doe", $json.name)}}**
Account type: **{{if(and(eq($json.username, "Bret"), contains($json.website, ".org")), "Verified Demo", "Regular")}}**
Location: **{{concat($json.address.city, ", ", $json.address.street)}}**

Contoh membaca path langsung dari object:

Website: {{get($json, "website")}}
Company: {{path($json, "company.name")}}

14. Regex

Regex berguna untuk validasi atau membersihkan data dari API.

`regexMatch`

Menghasilkan true atau false.

Email valid: {{regexMatch($json.email, "^[^@]+@[^@]+\\.[^@]+$")}}

`regexReplace`

Mengganti bagian teks berdasarkan pola regex.

Nomor bersih: {{regexReplace($json.phone, "[^0-9]", "")}}

`regexFirst`

Mengambil match pertama.

Segment pertama nomor: {{regexFirst($json.phone, "[0-9]+")}}

Contoh lengkap:

{{loadJson("https://jsonplaceholder.typicode.com/users/1")}}

Email: **{{$json.email}}**
Email valid: **{{regexMatch($json.email, "^[^@]+@[^@]+\\.[^@]+$")}}**
Phone asli: **{{$json.phone}}**
Phone bersih: **{{regexReplace($json.phone, "[^0-9]", "")}}**
Phone segment pertama: **{{regexFirst($json.phone, "[0-9]+")}}**

15. Footnote

Ini kalimat dengan footnote.[^1]

[^1]: Ini isi footnote.

16. Math Expression Sederhana

Beberapa ekspresi LaTeX umum akan dikonversi menjadi simbol Unicode sederhana.

Inline math: \(E = mc^2\)

Block math:
\[
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
\]

Catatan: ini bukan renderer LaTeX penuh. Gunakan untuk ekspresi sederhana saja.

17. Contoh Lengkap Konten Promo Member

# Halo {{nama}}

> [!NOTE]
> Kode member Anda adalah **{{kode}}**.

<div style="background: #E3F2FD; border-radius: 8px; padding: 16px; margin: 8px 0;">
  <h3 style="margin-top: 0;">Ringkasan Akun</h3>
  <p><strong>Email:</strong> {{email}}</p>
  <p><strong>Saldo:</strong> {{saldo}}</p>
  <p><strong>Poin:</strong> {{poin}}</p>
</div>

| Data | Nilai |
| --- | --- |
| Nama | {{nama}} |
| Kode | {{kode}} |
| Saldo | {{saldo}} |

<a href="https://hexaflate.com" style="background: #2196F3; color: white; padding: 10px 20px; border-radius: 4px; text-decoration: none; display: inline-block;">
  Buka Hexaflate
</a>

18. Contoh Lengkap dengan API

# Cek Data API

{{loadJson("https://api.example.com/member?kode=$kode&saldo=$saldo_raw", "", {"Authorization":"$x_token:$identifier:$key"})}}

Nama API: **{{$json.data.name}}**
Status: **{{$json.data.status}}**
Saldo API: **{{currency($json.data.balance)}}**

{{if(eq($json.data.status, "active"), "✅ Akun aktif", "⚠️ Akun tidak aktif")}}

Jika hanya ingin mengambil satu nilai:

Status member: **{{fetchJson("https://api.example.com/member?kode=$kode", "data.status", {"Authorization":"$x_token:$identifier:$key"})}}**

19. Tips Penggunaan

Gunakan Markdown biasa untuk konten panjang agar mudah dibaca.
Gunakan HTML hanya untuk kebutuhan styling sederhana seperti card, warna, alignment, tombol, dan table khusus.
Untuk data user di teks biasa, gunakan {{nama}}, {{kode}}, {{saldo}}.
Untuk data user di URL atau header API, gunakan $nama, $kode, $saldo_raw, $email, $identifier, dan $key. Untuk memanggil REST API Hexaflate, gunakan header Authorization dengan format $x_token:$identifier:$key.
Untuk query parameter angka, gunakan versi raw seperti $saldo_raw atau $komisi_raw.
Gunakan loadJson jika data API akan dipakai berkali-kali di halaman yang sama.
Gunakan fetchJson jika hanya butuh satu nilai dari API.
Hindari HTML atau CSS yang terlalu kompleks karena renderer dibuat untuk konten mobile sederhana.
Pastikan URL API cepat merespons karena request memiliki timeout.

20. Batasan

Ini bukan browser penuh seperti WebView HTML.
Tidak semua tag HTML dan CSS didukung.
JavaScript tidak dijalankan di Markdown renderer.
Template {{}} diproses sebelum Markdown dirender.
Di dalam URL/header API gunakan $variable, bukan {{variable}}.
Fetch API yang gagal akan menampilkan error template di halaman.
Math expression hanya konversi sederhana, bukan LaTeX lengkap.

Markdown dan HTML Usage

Ringkasan Fitur

1. Markdown Dasar

Heading

Format Teks

List

Task List

Link

Gambar

2. Table

3. Code Block

4. Blockquote dan Alert GitHub

Blockquote Biasa

Alert GitHub

5. HTML Sederhana yang Didukung

Format Teks HTML

Warna dan Background

Alignment

Gambar HTML

Card Sederhana

Alert Box Custom

Tombol Link

Navigasi Aplikasi dengan hexaflate://

Details / Summary

Progress dan Meter

Keyboard Key

6. Komponen Native dengan data-component

Grid Responsif

Menu Item

Card dengan Elevation / Shadow

Button

Badge / Chip

Alert Native

Image Card

Carousel Horizontal

7. Badge dan Emoji

8. Placeholder Data User

9. Template Function Dasar

Format Teks

Angka dan Currency

Kondisi

Comparison Operators

Text Check

10. Fetch JSON dari HTTP API

fetchJson

Placeholder $ di URL dan Header

loadJson

Path Nested JSON

11. Fetch Text

12. POST, PUT, PATCH, DELETE

13. Data Processing dari JSON

14. Regex

regexMatch

regexReplace

regexFirst

15. Footnote

16. Math Expression Sederhana

17. Contoh Lengkap Konten Promo Member

18. Contoh Lengkap dengan API

19. Tips Penggunaan

20. Batasan

Navigasi Aplikasi dengan `hexaflate://`

6. Komponen Native dengan `data-component`

`fetchJson`

Placeholder `$` di URL dan Header

`loadJson`

`regexMatch`

`regexReplace`

`regexFirst`