JSON Schema & Storage

The visual editor and the API use JSON configurations based on SavedConfiguration. In v2, the profile repository’s gitascii branch stores the default layout as gitascii.json and additional layouts as gitascii_[slug].json, alongside the published SVGs. The editor can also export a JSON file for programmatic use.

Complete Real JSON Example

Below is a complete, production-valid configuration representing a Terminal layout:

{
  "version": 1,
  "githubId": 583231,
  "username": "octocat",
  "profileSlug": "default",
  "profileName": "Default",
  "templateId": "terminal",
  "globalStyles": {
    "backgroundColor": "#060606",
    "transparentBackground": false,
    "textColor": "#ffffff",
    "accentColor": "#c5ff4a",
    "borderColor": "#252525",
    "fontFamily": "'JetBrains Mono', monospace",
    "borderRadius": 0,
    "padding": 24,
    "themeMode": "dark",
    "templateStyle": "terminal"
  },
  "widgets": [
    {
      "instanceId": "widget_header_0",
      "widgetId": "header",
      "name": "Header Widget",
      "position": { "x": 0, "y": 0 },
      "size": { "width": 800, "height": 90 },
      "config": {},
      "locked": false,
      "visible": true,
      "zIndex": 1
    },
    {
      "instanceId": "widget_ascii_art_1",
      "widgetId": "ascii-art",
      "name": "ASCII Art Widget",
      "position": { "x": 0, "y": 106 },
      "size": { "width": 280, "height": 280 },
      "config": {
        "detail": "medium",
        "cols": 150,
        "charset": "dense",
        "edgeEnhance": true,
        "lockAspectRatio": true,
        "accentColor": "#c5ff4a",
        "fontSize": 9
      },
      "locked": false,
      "visible": true,
      "zIndex": 2
    },
    {
      "instanceId": "widget_terminal_info_2",
      "widgetId": "terminal-info",
      "name": "Terminal Info Widget",
      "position": { "x": 296, "y": 106 },
      "size": { "width": 504, "height": 280 },
      "config": {
        "headerColor": "#58a6ff",
        "labelColor": "#ffa657",
        "valueColor": "#c9d1d9",
        "dotLeaders": true,
        "showUptime": true,
        "showLocation": true,
        "showLanguages": true,
        "showStars": true,
        "showRepos": true
      },
      "locked": false,
      "visible": true,
      "zIndex": 3
    },
    {
      "instanceId": "widget_languages_3",
      "widgetId": "languages",
      "name": "Top Languages Widget",
      "position": { "x": 0, "y": 402 },
      "size": { "width": 800, "height": 140 },
      "config": {
        "langsLayout": "bars",
        "langsCount": 5,
        "showPercentage": true
      },
      "locked": false,
      "visible": true,
      "zIndex": 4
    },
    {
      "instanceId": "widget_repositories_4",
      "widgetId": "repositories",
      "name": "Featured Repos Widget",
      "position": { "x": 0, "y": 558 },
      "size": { "width": 800, "height": 300 },
      "config": {
        "repoViewMode": "list",
        "repoSortBy": "stars",
        "maxRepos": 3,
        "showRepoLanguage": true,
        "showRepoStars": true,
        "showRepoDesc": true
      },
      "locked": false,
      "visible": true,
      "zIndex": 5
    },
    {
      "instanceId": "widget_footer_5",
      "widgetId": "footer",
      "name": "Footer Widget",
      "position": { "x": 0, "y": 874 },
      "size": { "width": 800, "height": 50 },
      "config": {
        "accentColor": "#c5ff4a"
      },
      "locked": false,
      "visible": true,
      "zIndex": 6
    }
  ],
  "metadata": {
    "createdAt": "2026-02-18T10:00:00.000Z",
    "updatedAt": "2026-02-18T10:00:00.000Z",
    "schemaVersion": 1,
    "generatedBy": "manual"
  }
}

Consuming JSON via Node.js / Server

You can load this JSON file from disk or an API response and feed it straight to renderSvg:

import fs from 'node:fs'
import { renderSvg, embedExternalImages, SavedConfiguration } from '@/engine'
import { fetchGitHubProfile } from '@/features/github/api/fetchProfile'

async function generateSvgFromJson(configPath: string): Promise<string> {
  const fileContent = fs.readFileSync(configPath, 'utf-8')
  const config: SavedConfiguration = JSON.parse(fileContent)

  // Fetch real-time GitHub profile metrics
  const profileData = await fetchGitHubProfile(config.username)

  // Render SVG composition
  const rawSvg = renderSvg(config, profileData)
  const { svg } = await embedExternalImages(rawSvg)

  return svg
}