Showcase
Counter Interaktif
3.9 KB JSCounter sederhana dengan reaktivitas Proxy-based. Klik tombol untuk menambah, reset untuk kembali ke nol.
---
judul: "Counter Interaktif"
---
Gaya:
body
font-family: 'Inter', system-ui, -apple-system, sans-serif
margin: 0
…Fitur v1.2 — Ergonomi Bahasa
9.1 KB JSShowcase empat penambahan v1.2: two-way binding (`ikat`), operator string (`berisi`), parameter default komponen, dan fetch inline (`on_klik = ambil ... ke`) dengan auto loading/error.
---
judul: "Fitur v1.2 — Ergonomi Bahasa"
---
Gaya:
body
font-family: 'Inter', system-ui, -apple-system, sans-serif
margin: 0
…Galeri Foto
4.6 KB JSGaleri kartu foto dari front-matter data binding. Demonstrasi `$external` reference dan nested `Buat`.
---
judul: "Galeri Foto"
foto: [{judul: "Senja di Pantai", url: "https://picsum.photos/seed/senja/400/300", deskripsi: "Pemandangan matahari terbenam"}, {judul: "Gunung Berkabut", url: "https://picsum.photos/seed/gunung/400/300", deskripsi: "Kabut pagi di pegunungan"}, {judul: "Kota Malam", url: "https://picsum.photos/seed/kota/400/300", deskripsi: "Skyline kota di malam hari"}, {judul: "Hutan Tropis", url: "https://picsum.photos/seed/hutan/400/300", deskripsi: "Kehijauan hutan hujan"}]
---
Gaya:
body
font-family: 'Inter', system-ui, -apple-system, sans-serif
…Daftar Reaktif Berkunci — v1.3.1
8.5 KB JSReactive list rendering (K1a) + keyed diff `dengan kunci` (K1b): node DOM asli dipakai ulang saat urutan berubah — tanpa Virtual DOM. Tambah, hapus di tengah, dan kosongkan untuk melihat rekonsiliasi berkunci.
---
judul: "Daftar Reaktif Berkunci — v1.3.1"
---
Gaya:
body
font-family: 'Inter', system-ui, -apple-system, sans-serif
margin: 0
…Transisi Daftar FLIP — v1.3.1
14.1 KB JSFLIP transitions (enter/leave/move) opt-in via `dengan transisi <nama>` di atas keyed list. Tambah item (enter), hapus item (leave), acak urutan (move) — animasi via CSS class, tanpa vDOM, zero eval, CSP-safe.
---
judul: Transisi Daftar FLIP — v1.3.1
description: Demo FLIP transitions (enter/leave/move) pada keyed list. Tambah item (enter), hapus item (leave), acak urutan (move) — semua via CSS class, tanpa vDOM, zero eval.
---
Halaman DemoTransisi:
data items = []
data idCounter = 0
…Todo List
5.2 KB JSDaftar tugas dengan input, tombol tambah, dan render list via `Ulangi untuk`. Menunjukkan pattern CRUD minimal.
---
judul: "Todo List"
---
Gaya:
body
font-family: 'Inter', system-ui, -apple-system, sans-serif
margin: 0
…Todo App LengkapApp
0.0 KB JSAplikasi todo list production-ready dengan reaktivitas, localStorage persistence, dan input handling.
---
judul: "Todo App Pro"
todos: ["Belajar PromptJS","Buat aplikasi pertama","Deploy ke production"]
---
Gaya:
body
font-family: 'Inter', system-ui, -apple-system, sans-serif
…Dashboard SPAApp
0.0 KB JSFull SPA dashboard dengan autentikasi, role-based access, client-side routing, dan 5 halaman.
---
judul: "PromptJS Dashboard"
butuhAuth: benar
redirect: /login
token: localStorage
tokenKey: auth_token
---
…Multi-Page SiteApp
0.0 KB JSWebsite multi-halaman dengan routing dan shared layout — blog, tentang, beranda.
---
judul: "PromptJS Showcase"
---
Gaya:
body
font-family: 'Inter', system-ui, sans-serif
margin: 0
…