diff --git a/package.json b/package.json
index 30a98d7..19249cf 100644
--- a/package.json
+++ b/package.json
@@ -1,45 +1,46 @@
 {
-	"name": "mcutils",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-cloudflare": "^4.1.0",
-		"@sveltejs/kit": "^2.5.2",
-		"@types/figlet": "^1.5.6",
-		"@types/javascript-color-gradient": "^2.4.0",
-		"@types/node": "^18.15.10",
-		"@zerodevx/svelte-toast": "^0.9.3",
-		"autoprefixer": "^10.4.14",
-		"postcss": "^8.4.21",
-		"svelte": "^4.2.12",
-		"svelte-awesome-color-picker": "^2.4.5",
-		"svelte-awesome-slider": "^1.1.0",
-		"svelte-check": "^3.0.1",
-		"svelte-multiselect": "^10.1.0",
-		"tailwindcss": "^3.2.7",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^5.1.5"
-	},
-	"type": "module",
-	"dependencies": {
-		"carbon-components-svelte": "^0.80.0",
-		"figlet": "^1.6.0",
-		"javascript-color-gradient": "^2.4.4",
-		"minecraft-server-status": "^1.0.1",
-		"minecraft-status": "^1.1.0",
-		"minecraft-text-js": "^1.1.3",
-		"mongoose": "^8.2.3",
-		"pixel-draw": "^0.0.1273",
-		"skinview3d": "^3.0.0-alpha.1",
-		"svelte-canvas": "^0.9.3",
-		"svelte-easy-crop": "^2.0.1"
+		"name": "mcutils",
+		"version": "0.0.1",
+		"private": true,
+		"scripts": {
+			"dev": "vite dev",
+			"build": "vite build",
+			"preview": "vite preview",
+			"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+			"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+		},
+		"devDependencies": {
+			"@sveltejs/adapter-cloudflare": "^4.1.0",
+			"@sveltejs/kit": "^2.5.2",
+			"@types/figlet": "^1.5.6",
+			"@types/javascript-color-gradient": "^2.4.0",
+			"@types/node": "^18.15.10",
+			"@zerodevx/svelte-toast": "^0.9.3",
+			"autoprefixer": "^10.4.14",
+			"postcss": "^8.4.21",
+			"svelte": "^4.2.12",
+			"svelte-awesome-color-picker": "^2.4.5",
+			"svelte-awesome-slider": "^1.1.0",
+			"svelte-check": "^3.0.1",
+			"svelte-multiselect": "^10.1.0",
+			"tailwindcss": "^3.2.7",
+			"tslib": "^2.4.1",
+			"typescript": "^5.0.0",
+			"vite": "^5.1.5"
+		},
+		"type": "module",
+		"dependencies": {
+			"carbon-components-svelte": "^0.80.0",
+			"figlet": "^1.6.0",
+			"javascript-color-gradient": "^2.4.4",
+			"minecraft-server-status": "^1.0.1",
+			"minecraft-status": "^1.1.0",
+			"minecraft-text-js": "^1.1.3",
+			"mongoose": "^8.2.3",
+			"pixel-draw": "^0.0.1273",
+			"skinview3d": "^3.0.0-alpha.1",
+			"svelte-canvas": "^0.9.3",
+			"svelte-easy-crop": "^2.0.1",
+			"pako": "^2.1.0"
+		}
 	}
-}
diff --git a/src/lib/component/util/luck-perms.svelte b/src/lib/component/util/luck-perms.svelte
new file mode 100644
index 0000000..12862c6
--- /dev/null
+++ b/src/lib/component/util/luck-perms.svelte
@@ -0,0 +1,216 @@
+<script lang="ts">
+  import { gzip } from 'pako';
+
+  type Node = {
+    type: 'prefix' | 'weight' | 'permission';
+    key: string;
+    value: boolean;
+  };
+
+  type Group = {
+    name: string;
+    prefix: string; // full key: e.g. "prefix.1.&7&lMEMBER&r "
+    weight?: number; // required before export
+    permissions: string[]; // e.g. ['essentials.fly']
+  };
+
+  // Required field
+  let author = '';
+
+  // Editable groups
+  let groups: Group[] = [
+    { name: 'default', prefix: 'prefix.1.&7&lMEMBER&r ', weight: undefined, permissions: [] }
+  ];
+
+  // Validation helpers
+  $: authorError = author.trim().length === 0 ? 'Author is required' : '';
+  function groupWeightError(g: Group): string | '' {
+    return typeof g.weight === 'number' && Number.isFinite(g.weight) ? '' : 'Weight is required';
+  }
+  $: anyGroupMissingWeight = groups.some((g) => !groupWeightError(g) ? false : (g.name.trim().length > 0 || g.prefix.trim().length > 0 || g.permissions.length > 0));
+  $: hasDefault = groups.some((g) => g.name.trim() === 'default');
+  $: defaultGroup = groups.find((g) => g.name.trim() === 'default');
+  $: defaultWeightError = defaultGroup ? groupWeightError(defaultGroup) : 'Default group is required';
+
+  // Build payload
+  function nowPretty(): string {
+    try {
+      return new Date().toLocaleString(undefined, { hour12: false, timeZoneName: 'short' });
+    } catch {
+      return new Date().toISOString();
+    }
+  }
+
+  function buildJsonPayload(emptyBase = false) {
+    const metadata = {
+      generatedBy: author.trim(),
+      generatedAt: nowPretty()
+    };
+
+    if (emptyBase) {
+      return {
+        metadata,
+        groups: {},
+        tracks: {},
+        users: {}
+      };
+    }
+
+    const groupsObj: Record<string, { nodes: Node[] }> = {};
+
+    for (const g of groups) {
+      const name = g.name.trim();
+      if (!name) continue;
+
+      // enforce weight
+      if (!(typeof g.weight === 'number' && Number.isFinite(g.weight))) {
+        continue; // skip invalid groups
+      }
+
+      const nodes: Node[] = [];
+      if (g.prefix && g.prefix.trim()) {
+        nodes.push({ type: 'prefix', key: g.prefix.trim(), value: true });
+      }
+      nodes.push({ type: 'weight', key: `weight.${g.weight}`, value: true });
+      for (const perm of g.permissions) {
+        const p = (perm || '').trim();
+        if (!p) continue;
+        nodes.push({ type: 'permission', key: p, value: true });
+      }
+
+      groupsObj[name] = { nodes };
+    }
+
+    return {
+      metadata,
+      groups: groupsObj,
+      tracks: {},
+      users: {}
+    };
+  }
+
+  function downloadGz(filename: string, jsonObj: unknown) {
+    const json = JSON.stringify(jsonObj, null, 2);
+    const compressed = gzip(json);
+    // Copy into a fresh Uint8Array to avoid SharedArrayBuffer typing issues
+    const u8 = new Uint8Array(compressed.byteLength);
+    u8.set(compressed);
+    const blob = new Blob([u8], { type: 'application/gzip' });
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }
+
+  const canExportFilled = () => authorError === '' && !anyGroupMissingWeight && hasDefault && defaultWeightError === '';
+  const canExportEmpty = () => authorError === '';
+
+  function addGroup() {
+    groups = [
+      ...groups,
+      { name: '', prefix: 'prefix.1.&7&lRANK&r ', weight: undefined, permissions: [] }
+    ];
+  }
+  function removeGroup(idx: number) {
+    const g = groups[idx];
+    if (g && g.name.trim() === 'default') return; // cannot remove default
+    groups = groups.filter((_, i) => i !== idx);
+  }
+  function addPermission(idx: number) { groups[idx].permissions = [...groups[idx].permissions, 'example.permission']; }
+  function removePermission(gidx: number, pidx: number) { groups[gidx].permissions = groups[gidx].permissions.filter((_, i) => i !== pidx); }
+
+  function exportFilled() { if (canExportFilled()) downloadGz('luckperms.json.gz', buildJsonPayload(false)); }
+  function exportEmptyBase() { if (canExportEmpty()) downloadGz('luckperms-base.json.gz', buildJsonPayload(true)); }
+</script>
+
+<style>
+  .card { border: 1px solid #333; border-radius: 8px; padding: 12px; margin: 8px 0; background: #111; }
+  .row { display: flex; gap: 8px; flex-wrap: wrap; }
+  .col { display: flex; flex-direction: column; gap: 6px; }
+  input { background: #1b1b1b; color: #e0e0e0; border: 1px solid #333; border-radius: 6px; padding: 8px; }
+  label { font-size: 0.9rem; color: #bbb; }
+  button { background: #2d6cdf; color: white; border: none; border-radius: 6px; padding: 8px 12px; cursor: pointer; }
+  button.secondary { background: #444; }
+  button.danger { background: #d94a4a; }
+  .muted { color: #8a8a8a; font-size: 0.9rem; }
+  .error { color: #ff6b6b; font-size: 0.85rem; }
+  .disabled { opacity: 0.6; cursor: not-allowed; }
+</style>
+
+<svelte:head>
+  <title>LuckPerms Prefix/Groups Builder</title>
+  <meta name="description" content="Create LuckPerms groups with prefix, weight, and permissions. Export as .json.gz" />
+</svelte:head>
+
+<div class="col" style="gap:12px">
+  <div class="row" style="align-items:center; gap:12px; margin-top:8px">
+    <img src="/component/icon/luck-perms.svg" alt="LuckPerms" style="height:32px" />
+    <h1>LuckPerms Prefix/Groups Builder</h1>
+  </div>
+
+  <div class="row">
+    <div class="col" style="flex:1; min-width:260px">
+      <label for="author">Author (required)</label>
+      <input id="author" bind:value={author} placeholder="Your name or team" />
+      {#if authorError}<span class="error">{authorError}</span>{/if}
+      <span class="muted">Will be set to <code>metadata.generatedBy</code>.</span>
+    </div>
+  </div>
+
+  <div class="row" style="align-items:center; gap:12px; margin-top:8px">
+    <button on:click={addGroup}>+ Add group</button>
+    <button class="secondary {canExportEmpty() ? '' : 'disabled'}" on:click={exportEmptyBase} disabled={!canExportEmpty()}>Export empty base (.json.gz)</button>
+    <button class="{canExportFilled() ? '' : 'disabled'}" on:click={exportFilled} disabled={!canExportFilled()}>Export with groups (.json.gz)</button>
+  </div>
+
+  {#each groups as g, i}
+    <div class="card">
+      <div class="row">
+        <div class="col" style="flex:1; min-width:200px">
+          <label for={`group-name-${i}`}>Group name</label>
+          <input id={`group-name-${i}`} bind:value={g.name} placeholder="owner, admin, default, ..." disabled={g.name.trim()==='default'} readonly={g.name.trim()==='default'} />
+        </div>
+        <div class="col" style="flex:2; min-width:300px">
+          <label for={`group-prefix-${i}`}>Prefix (full key)</label>
+          <input id={`group-prefix-${i}`} bind:value={g.prefix} placeholder="prefix.1.&7&lMEMBER&r " />
+          <span class="muted">Full syntax required: <code>prefix.&lt;priority&gt;.&lt;formatted text&gt;</code></span>
+        </div>
+        <div class="col" style="width:160px">
+          <label for={`group-weight-${i}`}>Weight (required)</label>
+          <input id={`group-weight-${i}`} type="number" bind:value={g.weight} placeholder="100" />
+          {#if groupWeightError(g)}<span class="error">{groupWeightError(g)}</span>{/if}
+        </div>
+      </div>
+
+      <div class="col" style="margin-top:8px">
+        <h3 class="muted">Permissions</h3>
+        {#each g.permissions as p, pidx}
+          <div class="row" style="align-items:center">
+            <input style="flex:1" aria-label="Permission" bind:value={g.permissions[pidx]} placeholder="e.g. essentials.fly" />
+            <button class="danger" on:click={() => removePermission(i, pidx)}>Remove</button>
+          </div>
+        {/each}
+        <div>
+          <button class="secondary" on:click={() => addPermission(i)}>+ Add permission</button>
+        </div>
+      </div>
+
+      {#if g.name.trim() !== 'default'}
+        <div style="margin-top:8px">
+          <button class="danger" on:click={() => removeGroup(i)}>Remove group</button>
+        </div>
+      {/if}
+    </div>
+  {/each}
+
+  <div class="card">
+    <h3>Export format (empty base preview)</h3>
+    <pre class="muted" style="overflow:auto; max-height:240px">{JSON.stringify(buildJsonPayload(true), null, 2)}</pre>
+    <span class="muted">The exported base has <code>groups</code> and <code>users</code> empty so you can fill it in the LuckPerms site.</span>
+  </div>
+</div>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 19d90d1..5a56b74 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -18,7 +18,7 @@ const utils: Util[] = [
         name: "Item IDs",
         description: "Search all in-game items and IDs.",
         shortDescription: "Modern & legacy item IDs",
-        seoDescription: "Comprehensive Minecraft item ID database. Search and explore all current and legacy item IDs (data values). Essential tool for modders, plugin developers, and command block enthusiasts.",
+        seoDescription: "Comprehensive Minecraft item ID database. Search and explore all current and legacy item IDs (data values). Essential tool for modders, plugin developers, and command block enthusiasts."
     },
     {
         path: "sound-explorer",
@@ -39,7 +39,7 @@ const utils: Util[] = [
         name: "RAM Calculator",
         description: "Calculate the recommended RAM for your server.",
         shortDescription: "Calculate recommended RAM",
-        seoDescription: "Optimize your Minecraft server performance with a RAM calculator. Get precise memory recommendations based on player count and installed plugins. Ensure smooth gameplay and maximize server efficiency with accurate RAM allocation.",
+        seoDescription: "Optimize your Minecraft server performance with a RAM calculator. Get precise memory recommendations based on player count and installed plugins. Ensure smooth gameplay and maximize server efficiency with accurate RAM allocation."
     },
     {
         path: "server-info",
@@ -53,42 +53,42 @@ const utils: Util[] = [
         name: "Skin Stealer",
         description: "Steal a player's skin from their IGN.",
         shortDescription: "Steal another player's skin",
-        seoDescription: "Discover and download Minecraft player skins instantly. Search by in-game name to view, save, and use any player's unique skin. Perfect for inspiration, cosplay, or trying new looks in Minecraft.",
+        seoDescription: "Discover and download Minecraft player skins instantly. Search by in-game name to view, save, and use any player's unique skin. Perfect for inspiration, cosplay, or trying new looks in Minecraft."
     },
     {
         path: "cape-stealer",
         name: "Cape Stealer",
         description: "Steal a player's cape from their IGN.",
         shortDescription: "Steal another player's cape",
-        seoDescription: "Explore and download rare Minecraft capes. Find Mojang, Minecon, and Optifine capes by player name. View, save, and admire exclusive Minecraft capes from any player. Ideal for cape enthusiasts and collectors.",
+        seoDescription: "Explore and download rare Minecraft capes. Find Mojang, Minecon, and Optifine capes by player name. View, save, and admire exclusive Minecraft capes from any player. Ideal for cape enthusiasts and collectors."
     },
     {
         path: "color-codes",
         name: "Color Codes",
         description: "List of built in color and format codes.",
         shortDescription: "All default color codes",
-        seoDescription: "Complete Minecraft color code reference guide. Access chat codes (&), MiniMessage tags, MOTD codes, and hex values. Enhance your server's visual appeal with our comprehensive color code table for text formatting and customization.",
+        seoDescription: "Complete Minecraft color code reference guide. Access chat codes (&), MiniMessage tags, MOTD codes, and hex values. Enhance your server's visual appeal with our comprehensive color code table for text formatting and customization."
     },
     {
         path: "color-text-generator",
         name: "Color Text Generator",
         description: "Generate and preview text with color codes.",
         shortDescription: "Create text with color codes",
-        seoDescription: "Create vibrant Minecraft text with our color code generator. Preview custom colored messages in chat, signs, books, MOTD, item name, item lore and kick message. Supports both standard color codes and custom hex values for unlimited creativity.",
+        seoDescription: "Create vibrant Minecraft text with our color code generator. Preview custom colored messages in chat, signs, books, MOTD, item name, item lore and kick message. Supports both standard color codes and custom hex values for unlimited creativity."
     },
     {
         path: "gradient-generator",
         name: "Gradient Generator",
         description: "Create a gradient between two colors for in-game text.",
         shortDescription: "Create chat color gradient",
-        seoDescription: "Design color gradients for Minecraft text, creating smooth transitions between any two colors. Get instant Spigot ChatColor and MiniMessage outputs for easy implementation in plugins.",
+        seoDescription: "Design color gradients for Minecraft text, creating smooth transitions between any two colors. Get instant Spigot ChatColor and MiniMessage outputs for easy implementation in plugins."
     },
     {
         path: "small-text-converter",
         name: "Small Text Converter",
         description: "Convert into sᴍᴀʟʟ ᴛᴇxᴛ seen on new era servers.",
         shortDescription: "Convert into sᴍᴀʟʟ ᴛᴇxᴛ",
-        seoDescription: "Transform your Minecraft text into stylish small caps. Convert regular text to the trendy, compact font used on popular servers like MCCI, Mineclub, TubNet. Stand out in chat, signs, and names with the easy-to-use small text converter.",
+        seoDescription: "Transform your Minecraft text into stylish small caps. Convert regular text to the trendy, compact font used on popular servers like MCCI, Mineclub, TubNet. Stand out in chat, signs, and names with the easy-to-use small text converter."
     },
     {
         path: "server-icon-converter",
@@ -102,7 +102,7 @@ const utils: Util[] = [
         name: "Unicode Symbols",
         description: "Collection of allowed in-game unicode characters.",
         shortDescription: "All allowed unicode symbols",
-        seoDescription: "Explore hundreds of Minecraft-compatible Unicode symbols. Enhance your chat, GUIs, and MOTDs with unique characters. The curated collection ensures all symbols display correctly in-game.",
+        seoDescription: "Explore hundreds of Minecraft-compatible Unicode symbols. Enhance your chat, GUIs, and MOTDs with unique characters. The curated collection ensures all symbols display correctly in-game."
     },
     {
         path: "note-block-songs",
@@ -139,8 +139,15 @@ const utils: Util[] = [
         "description": "Convert coordinates between the Overworld and the Nether, or vice versa.",
         "shortDescription": "Convert coordinates",
         "seoDescription": "Convert Minecraft coordinates between the Overworld and the Nether instantly. Calculate precise coordinates for fast travel, portal linking, and efficient navigation. Get accurate 8:1 ratio conversions for both directions, making your Nether travel planning quick and easy."
+    },
+    {
+        path: "luck-perms",
+        name: "LuckPerms Generator",
+        description: "Build LuckPerms groups with prefix, weight and permissions. Export a .json.gz file ready for the editor.",
+        shortDescription: "Generate LuckPerms groups",
+        seoDescription: "Create LuckPerms group configurations with colored prefixes, weights, and permissions. Export a compressed .json.gz compatible with the LuckPerms web editor."
     }    
-];
+  ];
 
 type Util = {
     path: string;
diff --git a/src/routes/luckperms/+page.svelte b/src/routes/luckperms/+page.svelte
new file mode 100644
index 0000000..1aa0e72
--- /dev/null
+++ b/src/routes/luckperms/+page.svelte
@@ -0,0 +1,199 @@
+<script lang="ts">
+  import { gzip } from 'pako';
+
+  type Node = {
+    type: 'prefix' | 'weight' | 'permission';
+    key: string;
+    value: boolean;
+  };
+
+  type Group = {
+    name: string;
+    prefix: string; // e.g. "prefix.1.&7&lMEMBER&r "
+    weight?: number; // e.g. 100
+    permissions: string[]; // e.g. ['essentials.fly']
+  };
+
+  let groups: Group[] = [
+    { name: 'default', prefix: 'prefix.1.&7&lMEMBER&r ', weight: undefined, permissions: [] }
+  ];
+
+  let generatedBy = 'Scalamobile';
+
+  function addGroup() {
+    groups = [
+      ...groups,
+      { name: '', prefix: 'prefix.1.&7&lRANK&r ', weight: undefined, permissions: [] }
+    ];
+  }
+
+  function removeGroup(idx: number) {
+    groups = groups.filter((_, i) => i !== idx);
+  }
+
+  function addPermission(idx: number) {
+    groups[idx].permissions = [...groups[idx].permissions, 'example.permission'];
+  }
+
+  function removePermission(gidx: number, pidx: number) {
+    groups[gidx].permissions = groups[gidx].permissions.filter((_, i) => i !== pidx);
+  }
+
+  function nowPretty(): string {
+    try {
+      // Use local time with short TZ name, close to examples like "CEST"
+      return new Date().toLocaleString(undefined, { hour12: false, timeZoneName: 'short' });
+    } catch {
+      return new Date().toISOString();
+    }
+  }
+
+  function buildJsonPayload(emptyBase = false) {
+    const metadata = {
+      generatedBy,
+      generatedAt: nowPretty()
+    };
+
+    if (emptyBase) {
+      return {
+        metadata,
+        groups: {},
+        tracks: {},
+        users: {}
+      };
+    }
+
+    const groupsObj: Record<string, { nodes: Node[] }> = {};
+
+    for (const g of groups) {
+      if (!g.name.trim()) continue;
+
+      const nodes: Node[] = [];
+      // prefix node expects full key like: prefix.1.&7&lMEMBER&r 
+      if (g.prefix && g.prefix.trim()) {
+        nodes.push({ type: 'prefix', key: g.prefix.trim(), value: true });
+      }
+      // weight node
+      if (typeof g.weight === 'number' && Number.isFinite(g.weight)) {
+        nodes.push({ type: 'weight', key: `weight.${g.weight}`, value: true });
+      }
+      // permissions
+      for (const perm of g.permissions) {
+        const p = (perm || '').trim();
+        if (!p) continue;
+        nodes.push({ type: 'permission', key: p, value: true });
+      }
+
+      groupsObj[g.name.trim()] = { nodes };
+    }
+
+    return {
+      metadata,
+      groups: groupsObj,
+      tracks: {},
+      users: {} // intentionally empty so the user can add on the LuckPerms editor site
+    };
+  }
+
+  function downloadGz(filename: string, jsonObj: unknown) {
+    const json = JSON.stringify(jsonObj, null, 2);
+    const compressed = gzip(json);
+    const blob = new Blob([compressed], { type: 'application/gzip' });
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }
+
+  function exportFilled() {
+    const data = buildJsonPayload(false);
+    downloadGz('luckperms.json.gz', data);
+  }
+
+  function exportEmptyBase() {
+    const data = buildJsonPayload(true);
+    downloadGz('luckperms-base.json.gz', data);
+  }
+</script>
+
+<style>
+  .card { border: 1px solid #333; border-radius: 8px; padding: 12px; margin: 8px 0; background: #111; }
+  .row { display: flex; gap: 8px; flex-wrap: wrap; }
+  .col { display: flex; flex-direction: column; gap: 6px; }
+  input, textarea, select { background: #1b1b1b; color: #e0e0e0; border: 1px solid #333; border-radius: 6px; padding: 8px; }
+  label { font-size: 0.9rem; color: #bbb; }
+  button { background: #2d6cdf; color: white; border: none; border-radius: 6px; padding: 8px 12px; cursor: pointer; }
+  button.secondary { background: #444; }
+  button.danger { background: #d94a4a; }
+  .muted { color: #8a8a8a; font-size: 0.9rem; }
+</style>
+
+<svelte:head>
+  <title>LuckPerms Prefix/Groups Builder</title>
+  <meta name="description" content="Crea gruppi LuckPerms con prefix, weight e permessi ed esporta in .json.gz" />
+</svelte:head>
+
+<div class="col" style="gap:12px">
+  <h1>LuckPerms Prefix/Groups Builder</h1>
+  <div class="row">
+    <div class="col" style="flex:1; min-width:260px">
+      <label>Generated by</label>
+      <input bind:value={generatedBy} placeholder="Scalamobile" />
+      <span class="muted">Verrà inserito in <code>metadata.generatedBy</code>.</span>
+    </div>
+  </div>
+
+  <div class="row" style="align-items:center; gap:12px; margin-top:8px">
+    <button on:click={addGroup}>+ Aggiungi gruppo</button>
+    <button class="secondary" on:click={exportEmptyBase}>Esporta base vuota (.json.gz)</button>
+    <button on:click={exportFilled}>Esporta con gruppi (.json.gz)</button>
+  </div>
+
+  {#each groups as g, i}
+    <div class="card">
+      <div class="row">
+        <div class="col" style="flex:1; min-width:200px">
+          <label>Nome gruppo</label>
+          <input bind:value={g.name} placeholder="owner, admin, default, ..." />
+        </div>
+        <div class="col" style="flex:2; min-width:300px">
+          <label>Prefix (chiave completa)</label>
+          <input bind:value={g.prefix} placeholder="prefix.1.&7&lMEMBER&r " />
+          <span class="muted">Usa la sintassi completa: <code>prefix.&lt;priorità&gt;.&lt;testo formattato&gt;</code></span>
+        </div>
+        <div class="col" style="width:160px">
+          <label>Weight (numero)</label>
+          <input type="number" bind:value={g.weight} placeholder="100" />
+        </div>
+      </div>
+
+      <div class="col" style="margin-top:8px">
+        <label>Permessi</label>
+        {#each g.permissions as p, pidx}
+          <div class="row" style="align-items:center">
+            <input style="flex:1" bind:value={g.permissions[pidx]} placeholder="es. essentials.fly" />
+            <button class="danger" on:click={() => removePermission(i, pidx)}>Rimuovi</button>
+          </div>
+        {/each}
+        <div>
+          <button class="secondary" on:click={() => addPermission(i)}>+ Aggiungi permesso</button>
+        </div>
+      </div>
+
+      <div style="margin-top:8px">
+        <button class="danger" on:click={() => removeGroup(i)}>Rimuovi gruppo</button>
+      </div>
+    </div>
+  {/each}
+
+  <div class="card">
+    <h3>Formato di esportazione</h3>
+    <pre class="muted" style="overflow:auto; max-height:240px">{JSON.stringify(buildJsonPayload(true), null, 2)}</pre>
+    <span class="muted">La base esportata ha <code>groups</code> e <code>users</code> vuoti per essere compilata nel sito LuckPerms.</span>
+  </div>
+</div>
diff --git a/static/component/icon/luck-perms.svg b/static/component/icon/luck-perms.svg
new file mode 100644
index 0000000..7d5d87f
--- /dev/null
+++ b/static/component/icon/luck-perms.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1979.01 1979.01">
+  <circle cx="989.5" cy="989.5" r="989.5" fill="#303030"/>
+  <circle cx="989.5" cy="989.5" r="860.87" fill="#94df03"/>
+  <path d="M955.51 841.51c-5.42-46.84-29.94-102.23-42-148-19.55-89.4-49.61-149.11-43-223 6.85-34.26 32.94-113.18 73-141 38.62-23.34 131.4-38.27 182 12 42.72 64 52.2 70.85 134 50 77.67-16.73 152.63 40.41 186 99 15.42 35.21 15.57 60.72 11 94-33.92 81.88-159.24 179.75-185 204-46.31 31.61-76.2 38.47-112.19 62.65-3.39 2.28-28.74 26.15-42.82 35.34-6.26 4.78-19.09 13.85-17 26 2.27 9.58 15.82 16.65 23.39 11.53 22.09-15 144.44-53 144.44-53 131.18-40.63 197.18-60.93 219.18-59.52 33 2 105.21 6.54 146.08 62.22 39 53.1 38.4 137.61 1.68 182.39-20.1 24.53-42.9 27.2-52.6 56-9.58 28.46 6.6 43.77 12.79 81.33 13.61 82.51-38.29 167.29-84.78 192.89-18.79 10.35-39.63 15.17-39.63 15.17s-26 6-53.27 2.86-53.19-17.12-130.43-86c-50.38-44.94-75.57-67.41-86.88-83.15-25.89-36-33.52-63-70.89-107.17-15.14-17.92-31.86-39.6-38.45-40.06s-33.52 17.44-29.59 34.55c71.44 177.34 171.4 295.91 200 521-12.51 22.25-56.23 14.76-78 19-27.66 4.16-47.9 29-73 15-39.86-119.51-35.34-424.35-104-556-13.88 0-20.18-1.32-25 0-11 3 3.14 83.57 9 142.71 10.53 106.32 16.24 163.92-7.58 227-11.73 31-37.26 98.62-102.49 121.27-62.21 21.61-142.81-3.83-174.79-52.11-17.52-26.43-13.36-49-38.07-66.78-24.38-17.53-43.77-6.58-81.49-11.72-82.86-11.3-148.6-85.86-159.37-137.83-4.36-21-2.82-42.34-2.82-42.34s1.91-26.61 13-51.76c11.53-26.24 33.71-46.87 120.62-99.3 59-35.57 88.43-53.36 105-58.53 49.33-15.37 94-17.59 126-33.09 1.6-.77 19.55-9.75 33.07-16.3 12.48-6 21.58-16.59 29.14-28.21 9.75-15 7.28-21.28-6.65-21.81-49.47 13.51-102.28 8.76-152.93 16.8-104 16.51-162 25.72-227 5.31-31.59-9.91-100.57-31.57-126.9-95.43-25.1-60.89-4.28-142.8 42.1-177.47 25.41-19 48.18-16.12 64.52-41.8 16.12-25.33 4.08-44.07 7.08-82 6.53-83.44 77.25-153.31 128.53-167.01 20.72-5.54 42.11-5.22 42.11-5.22s26.67.4 52.41 10c25.57 9.59 47.48 29.37 105.98 114.79 40.71 59.48 61.06 89.21 64.4 101.56 0 0 23.45 86.62 43.12 121 18.79 32.89 17.42 39.17 27.72 48.1 6.13 9.82 34 15.92 41.25 2.09" fill="#303030"/>
+</svg>