Project Templates
Template Overview

TELA Project Templates

Ready-to-use project templates for building TELA applications quickly. All templates follow TELA size constraints and best practices.

🚀

Quick Start Templates

These templates provide working TELA applications you can customize and deploy immediately. Each template includes complete HTML, CSS, and JavaScript with XSWD integration and follows TELA design system patterns.

Available Templates

⚡
XSWD Super Core (Official)
🔋
XSWD Minimal Core
📄
Basic TELA App
📦
TELA API Template (Downloadable)

Downloadable Code Templates

📥

Direct Download: tela-api-template.js - Complete DERO/TELA API implementation you can include in any TELA application. Right-click and save, or copy the code directly.

Template Features

What's Included in Every Template

✅ Complete file structure (HTML, CSS, JS)
✅ TELA design system styling
✅ XSWD Super Core integration for robust wallet connectivity
✅ Size optimization (with compression guidance)
✅ Responsive design for all devices
✅ Production-grade error handling and loading states
✅ Real DERO data integration with fallback modes
✅ Copy-paste ready code with deployment instructions

Template Structure

template-name/
├── index.html          # Main application file
├── styles.css          # TELA design system styles
├── app.js             # Core application logic
├── README.md          # Usage instructions
└── deploy-guide.md    # Deployment instructions

Quick Start Workflow

1. Choose Your Template

Pick the template that best matches your project needs:

For Most Applications:

XSWD Libraries (Choose One):

2. Copy Template Files

Each template page provides complete, copy-paste ready code for all files.

3. Customize for Your Needs

  • Update application name and description
  • Modify colors and styling as needed
  • Add your specific functionality
  • Test locally with tela-cli serve local

4. Deploy to TELA

# Using TELA-CLI
tela-cli
endpoint simulator
wallet ./your-wallet.db
 
# Deploy each file
install-doc index.html
install-doc styles.css  
install-doc app.js
 
# Create INDEX
install-index YourAppName
 
# Test deployed version
serve [your-new-scid]

Template Customization Guide

Color Theme Customization

/* Change the primary color theme */
:root {
  /* Original: Cyan theme */
  --primary-color: #52c8db;
  
  /* Alternative themes: */
  /* --primary-color: #b959b6;  Purple theme */
  /* --primary-color: #4ade80;  Green theme */
  /* --primary-color: #fbbf24;  Amber theme */
}
 
/* Update all primary color references */
.btn-primary { border-color: var(--primary-color); color: var(--primary-color); }
.text-primary { color: var(--primary-color); }
.enhanced-stat-card { border-color: rgba(82,200,219,0.3); } /* Update with your color */

Application Name Customization

// Update these values in your app.js
const AppConfig = {
  name: 'Your App Name',
  description: 'Your app description',
  version: '1.0.0',
  xswd: {
    id: 'your-unique-app-id',
    name: 'Your App Name',
    description: 'Brief description for wallet connection',
    url: window.location.origin
  }
};

Adding Custom Features

// Template for adding new features
const CustomFeature = {
  name: 'My Custom Feature',
  
  render() {
    return `
      <div class="enhanced-card">
        <div class="card-header">
          <h3 style="color:#52c8db;margin:0;">${this.name}</h3>
        </div>
        <div class="card-content">
          <!-- Your custom content here -->
        </div>
      </div>
    `;
  },
  
  async loadData() {
    // Your custom XSWD calls here
    try {
      const data = await xswd.call('DERO.GetInfo');
      return data;
    } catch (error) {
      console.error('Failed to load data:', error);
      return null;
    }
  }
};

Best Practices for Templates

Template Development Guidelines

  • Keep it simple - Templates should be easy to understand and modify
  • Follow size limits - All files must stay under 18KB
  • Use proven patterns - Based on working TELA applications
  • Include error handling - Graceful degradation for network issues
  • Test thoroughly - Verify templates work with real DERO data

File Size Management

# Check template file sizes before deployment
check_template_sizes() {
  echo "📏 Template File Sizes:"
  for file in *.html *.css *.js; do
    if [ -f "$file" ]; then
      size=$(wc -c < "$file")
      kb=$(echo "scale=2; $size/1024" | bc)
      if (( $(echo "$kb > 18" | bc -l) )); then
        echo "❌ $file: ${kb}KB (EXCEEDS LIMIT)"
      elif (( $(echo "$kb > 15" | bc -l) )); then
        echo "⚠️  $file: ${kb}KB (consider compression)"
      else
        echo "✅ $file: ${kb}KB"
      fi
    fi
  done
}

Template Testing Workflow

# Test template before publishing
test_template() {
  echo "🧪 Testing TELA template..."
  
  # 1. Check file sizes
  check_template_sizes
  
  # 2. Test local serving
  echo "📡 Testing local serving..."
  tela-cli serve local ./
  
  # 3. Validate XSWD integration
  echo "🔗 Testing XSWD connection..."
  # Manual test: Check if wallet connection works
  
  # 4. Test deployment process
  echo "🚀 Testing deployment..."
  # Deploy to simulator network for testing
  
  echo "✅ Template testing complete!"
}

Next Steps

  1. Choose a Template - Start with the basic app template
  2. Learn TELA Development - Complete development guide
  3. Customize Design - Use design system components
  4. Deploy Your App - Deploy using TELA-CLI

Ready to Build Your TELA Application?

These templates provide everything you need to start building immediately. Choose a template, customize it, and deploy to the DERO blockchain.

Start with Basic App

Get XSWD Library

Related Pages

Available Templates:

Development Resources:

Deployment: