Studio

The Studio is Hologram's integrated development environment for creating, deploying, and managing TELA applications. It provides tools for local development, batch deployment, and version control. For testing with real blockchain state, use Simulator Mode.

Overview

Studio consists of four main sections:

Serve (Local Dev Server)

The Serve tab provides a local development server for testing TELA apps before deployment.

Starting the Server

1. Navigate to Studio > Serve
2. Click "Choose Directory"
3. Select a folder containing your TELA app (must have index.html)
4. Server starts automatically on an available port (default: 8080)

Features

Supported File Types

• Web files: .html, .htm, .css, .js, .mjs, .json
• Images: .svg, .png, .jpg, .jpeg, .gif, .webp, .ico
• Fonts: .woff, .woff2, .ttf

Hot Reload Behavior

• File changes detected automatically (300ms debounce)
• Only reloads when Browser tab is viewing local content
• Recent changes displayed in Studio tab
• XSWD connection maintained during reload

API Reference

StartLocalDevServer(directory string) -> {
    success: true,
    url: "http://127.0.0.1:8080",
    port: 8080
}
 
StopLocalDevServer() -> { success: true }
 
GetLocalDevServerStatus() -> {
    running: true,
    url: "http://127.0.0.1:8080",
    port: 8080,
    directory: "/path/to/app",
    watcherActive: true
}

Deploy

The Deploy tab provides tools for deploying both complete TELA applications and raw DVM-BASIC smart contracts to the blockchain.

Upload Smart Contract (Raw SC)

For developers building standalone smart contracts or testing backend logic, Hologram provides a direct SC deployment interface:

1. Select "Upload SC" — Toggle to the raw smart contract deployment mode
2. Paste Code — Paste your DVM-BASIC smart contract code into the editor
3. Deploy — Hologram automatically estimates gas and deploys the contract

Batch Deployment Process (TELA Apps)

1. Choose Directory — Select your app folder
2. Configure — Set name, description, dURL, and content type
3. Review — See all files to be deployed
4. Deploy — Watch progress as files are uploaded

Configuration Options

Icon URL Validation

Hologram validates icon URLs in real-time as you type:

• HTTPS URLs — Validated for proper format
• HTTP URLs — Accepted with warning (HTTPS recommended)
• SCID — 64-character hex string (on-chain image reference)
• IPFS — ipfs:// protocol URLs

Visual feedback indicators:

• ✓ Green checkmark for valid HTTPS/SCID/IPFS
• ⚠ Yellow warning for HTTP URLs
• ✗ Red X for invalid formats

dURL Tag Detection

Hologram automatically detects special dURL suffixes and shows contextual descriptions:

When you enter a dURL with one of these suffixes, Hologram displays a badge with the appropriate description.

MODs (Modification Operations)

MODs add smart contract functionality to your INDEX. MODs require Ring 2 (updateable content).

Variable Store MOD

Select one Variable Store MOD to add on-chain key-value storage:

• vs1, vs2, etc. — Different variable store implementations
• Single selection only — Choose the storage system that fits your needs
• Automatically enforces Ring 2 — MODs require updateable content

Transfer MODs

Select multiple Transfer MODs to enable different transfer capabilities:

• tx1, tx2, etc. — Various transfer and deposit functionalities
• Multiple selection — Combine different transfer types
• Automatically enforces Ring 2 — MODs require updateable content

MOD Picker Modal

When you enable MODs, a modal opens with:

• Variable Store section — Select one storage system
• Transfer section — Select multiple transfer types
• Selected MODs summary — Shows combined tags (e.g., vs1,tx1,tx2)
• Clear all — Reset selections

The selected MOD tags are included in the INDEX contract's mods field.

Library Installation Flow

When installing a library (dURL ending in .lib), Hologram provides an "Embed in INDEX" workflow:

1. View library contents — See all DOCs in the library
2. Click "Embed in INDEX" — Adds library DOC references to your INDEX
3. Automatic DOC reference addition — Library DOCs are automatically included in your INDEX's DOC1, DOC2, etc. variables

This makes it easy to reuse library components across multiple TELA apps.

Password Confirmation Modal

For mainnet deployments, Hologram shows a password confirmation modal with enhanced safety:

• Password required — Must enter wallet password to proceed
• Acknowledgement checkbox — Must confirm you understand this is a mainnet deployment
• Gas estimate display — Shows estimated gas cost before deployment
• Network indicator — Clearly shows "Mainnet" or "Testnet"

Content Types

File Processing

During deployment, Hologram:

1. Scans directory — Finds all web files
2. Compresses large files — Gzip for files over threshold
3. Deploys DOCs — Each file becomes a TELA-DOC-1 contract
4. Creates INDEX — Links all DOCs together
5. Registers dURL — If specified

File Size Limits

Deployment Result

DeployTELABatch(config) -> {
    success: true,
    indexSCID: "abc123...",
    durl: "myapp.tela",
    files: [
        { name: "index.html", scid: "...", size: 4096 },
        { name: "styles.css", scid: "...", size: 2048 },
        ...
    ],
    gasCost: 150000  // or "FREE" in simulator
}

My Content

The My Content tab displays all TELA applications you've deployed, making it easy to manage your on-chain content.

Your Deployed Apps

View all INDEX contracts owned by your connected wallet:

Quick Actions

Each app in your content list has quick action buttons:

Stats Overview

The My Content header shows aggregate statistics:

• Total Apps — Number of INDEX contracts you own
• Total Views — Combined view count across all apps
• Total Likes — Combined approval count

Actions (Version Control)

The Actions tab provides Git-like version control for TELA applications. Every update to an INDEX creates a new "commit" that can be viewed, compared, or reverted to.

Version History Modal

Click the Version History button (clock icon) in the Browser toolbar or use Actions > View History to open the Version History modal for any TELA app.

Timeline View

The left panel shows a chronological timeline of all commits:

Semantic Labels

Hologram automatically generates descriptive labels by analyzing file changes between versions:

Detail View

Click any version to see its details in the right panel:

• Block height — When deployed
• Transaction ID — Full TXID (click to copy)
• dURL — Registered URL at this version
• File count — Number of files in this version
• File browser — Tabs to view each file's content
• DOC SCIDs — List of DOC contract IDs

Compare Mode

Toggle Compare Versions to diff two versions:

1. Click Compare Versions button
2. Select first version (older)
3. Select second version (newer)
4. View file-by-file diff

File Diff Display

The diff view shows changes organized by file:

For modified files, Hologram shows line-by-line changes:

• Lines with - prefix (red) — Removed content
• Lines with + prefix (green) — Added content

Cloning

Clone TELA content to your local filesystem:

scid              → Clone latest version
scid@txid         → Clone specific commit

Use the Clone button in the Version History modal or Actions tab to download files.

Version Pinning

Access specific historical versions using the scid@txid format:

1. Open Version History for an INDEX
2. Find the commit you want
3. Copy its TXID
4. Navigate to scid@txid in the Browser address bar

This allows bookmarking or sharing links to specific versions of an app.

Revert and Clone Actions

From the Version History detail view:

API Reference

// Get commit history with semantic labels
GetCommitHistoryWithLabels(scid string) -> {
    success: true,
    scid: "abc123...",
    commits: [
        {
            number: 1,
            height: 123456,
            txid: "def789...",
            label: "Initial deployment",
            isCurrent: false
        },
        {
            number: 2,
            height: 123500,
            txid: "ghi012...",
            label: "Updated styles.css, app.js",
            isCurrent: true
        }
    ],
    count: 2
}
 
// Get basic commit history (faster, generic labels)
GetCommitHistory(scid string) -> {
    success: true,
    commits: [...],
    count: 2
}
 
// Get content at a specific commit
GetCommitContent(scid string, commitNum int) -> {
    success: true,
    files: {
        "index.html": "<html>...",
        "styles.css": "body {...}",
        "app.js": "console.log..."
    },
    docs: ["doc1scid...", "doc2scid..."],
    durl: "myapp.tela",
    message: "Content retrieved successfully"
}
 
// Compare two commits
DiffCommits(scid string, fromCommit int, toCommit int) -> {
    success: true,
    fromCommit: 1,
    toCommit: 2,
    fileDiffs: [
        {
            fileName: "styles.css",
            status: "modified",
            lineDiffs: [
                { line: 5, type: "modified", oldContent: "color: red;", newContent: "color: blue;" }
            ]
        },
        {
            fileName: "new-file.js",
            status: "added",
            lineDiffs: []
        }
    ],
    summary: "1 file modified, 1 file added",
    hasChanges: true
}

Performance Notes

• TXID Caching — Transaction IDs are cached after first retrieval to speed up subsequent history loads
• Semantic Labels — Only generated for the last 5 commits to balance detail vs. performance
• Content Fetching — File content is loaded on-demand when you select a commit

Workflow Examples

New App Development

1. Create project directory

   mkdir my-tela-app
   cd my-tela-app

2. Create files

   <!-- index.html -->
   <!DOCTYPE html>
   <html>
   <head>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <h1>My TELA App</h1>
     <script src="app.js"></script>
   </body>
   </html>

3. Start local dev server

   • Studio > Serve > Choose Directory

4. Develop with hot reload

   • Edit files, see changes instantly

5. Deploy when ready

   • Studio > Deploy > Choose Directory > Deploy

Updating Existing App

1. Clone current version

   • Actions > Clone > Enter SCID

2. Make changes locally

   • Edit files in cloned directory

3. Test with local dev server

   • Serve > Choose cloned directory

4. Deploy update

   • Deploy > Choose directory
   • Use same dURL as before

Best Practices

1. Test locally first — Use Serve before deploying
2. Use meaningful names — Help users find your app
3. Write good descriptions — Shown in Discover tab
4. Choose dURL carefully — Can't be changed after deployment
5. Consider immutability — For apps that should never change
6. Check file sizes — Keep under 18KB per file
7. Avoid */ in code — Breaks TELA's comment wrapper

Troubleshooting