Derived Documentation

What is Derived?

Derived is a desktop application that helps developers generate code quickly and efficiently using templates. Think of it as a powerful code scaffolding tool with a user-friendly interface, live preview, and zero setup required.

Core Concepts

Templates

Templates are text files with placeholders that generate code based on your input data. For example, a template with {{.name}}Controller and input {"name": "user"} generates userController in your code.

Blocks

A block is a collection of templates that creates a complete module or feature. Examples include:

Authentication system
CRUD operations
Email service
User management

Each block can have:

Multiple templates with specific file paths
Optional JSON input that templates can reference
Public or private visibility

Block Categories

Blocks are organized into categories for better structure and discoverability. Categories help you:

Organize blocks logically - Group related functionality together
Find blocks quickly - Browse by category instead of searching through all blocks
Maintain structure - Keep your workspace organized as you create more blocks

Common category examples:

Backend - API controllers, services, database models
Frontend - Components, pages, utilities
DevOps - Docker files, CI/CD configurations
Documentation - README templates, API docs
Authentication - Login systems, user management
Database - Migrations, seeders, queries

When creating a block, you can assign it to an existing category or create a new one, making it easier for you and your team to find and reuse blocks later.

Projects

Projects link your blocks to a local directory on your computer. Once linked, this becomes the root directory where your generated code will be placed.

Template Syntax

Derived uses a powerful templating syntax that allows you to create dynamic, reusable code templates.

Accessing Data

Access JSON data using the {{ .key }} syntax:

// Data source
{
    "name": "Customer",
    "type": "premium"
}

// Template
export class {{.name}}Service {
    type = "{{.type}}";
}

// Generated code
export class CustomerService {
    type = "premium";
}

Nested Data

Access nested properties using dot notation:

// Data source
{
    "user": {
        "profile": {
            "firstName": "John"
        }
    }
}

// Template
const name = "{{.user.profile.firstName}}";

// Generated code
const name = "John";

Loops

Loop through arrays using {{ range .key }}:

// Data source
{
    "country": "India",
    "cities": [
        {"name": "Mumbai", "code": "MUM"},
        {"name": "Delhi", "code": "DEL"}
    ]
}

// Template
{{ range .cities }}
export const {{.name}} = "{{.code}}";
{{ end }}

// Generated code
export const Mumbai = "MUM";
export const Delhi = "DEL";

Accessing Parent Context in Loops

Use $. to access parent context inside loops:

// Template
{{ range .cities }}
// {{.name}} is located in {{$.country}}
{{ end }}

// Generated code
// Mumbai is located in India
// Delhi is located in India

Conditional Statements

Use if statements for conditional logic:

// Data source
{
    "user": "admin",
    "hasPermissions": true
}

// Template
{{if .hasPermissions}}
const user = new AdminUser("{{.user}}");
{{else}}
const user = new RegularUser("{{.user}}");
{{end}}

// Generated code
const user = new AdminUser("admin");

Built-in Functions

Transform your data using built-in functions:

// Data source
{
    "entityName": "UserProfile"
}

// Template
{{camelCase .entityName}}  // userProfile
{{snakeCase .entityName}}  // user_profile
{{kebabCase .entityName}}  // user-profile
{{flatCase .entityName}}   // userprofile

// Usage example
export class {{.entityName}} {
    private {{camelCase .entityName}}Repository;
    
    constructor() {
        this.{{camelCase .entityName}}Repository = new Repository();
    }
}

Using the Template Editor

Creating Templates

Select your project from the top-left dropdown
Create a new template using the 'Add new template' button
Choose template type:
- Add: Creates a new file
- Modify: Modifies an existing file using identifiers

Template Types

Add Templates

Creates entirely new files in your project:

// Template path: src/services/{{.name}}Service.ts
// Template content:
export class {{.name}}Service {
    async create{{.name}}(data: any) {
        // Implementation here
    }
}

Modify Templates

Modifies existing files using identifiers (comments in your code):

Existing file (routes.ts):

import express from 'express';

// Add routes here

export default router;

Template with identifier // Add routes here:

router.use('/{{camelCase .name}}', {{camelCase .name}}Routes);
// Add routes here

Result:

import express from 'express';

router.use('/user', userRoutes);
// Add routes here

export default router;

File Paths with Variables

Use template variables in file paths for dynamic file generation:

// Template paths:
src/routes/{{.schema.name}}Controller.ts
src/routes/{{.schema.name}}Service.ts
src/routes/{{.schema.name}}Routes.ts

// With data: {"schema": {"name": "user"}}
// Generates:
src/routes/userController.ts
src/routes/userService.ts
src/routes/userRoutes.ts

Key Features

Live Preview

See your generated code in real-time as you write templates and modify input data. This helps you:

Verify template logic immediately
Test different input scenarios
Debug template issues quickly

Error Detection

Derived automatically detects and highlights:

Invalid template syntax
Missing data references
JSON formatting errors

Auto-completion

Get intelligent suggestions for:

Available data properties
Built-in functions
Template syntax

Open Derived
Create a new project and link it to your local directory
Create a new block with a descriptive name
Add your first template with a file path

2. Example: Simple React Component

Block Input:

{
    "componentName": "UserCard",
    "props": [
        {"name": "name", "type": "string"},
        {"name": "email", "type": "string"}
    ]
}

Template (src/components/{{.componentName}}.tsx):

import React from 'react';

interface {{.componentName}}Props {
{{range .props}}
    {{.name}}: {{.type}};
{{end}}
}

export const {{.componentName}}: React.FC<{{.componentName}}Props> = ({
{{range .props}}
    {{.name}},
{{end}}
}) => {
    return (
        <div className="{{kebabCase .componentName}}">
{{range .props}}
            <p>{{.name}}: {{"{"}}{{.name}}{"}"}</p>
{{end}}
        </div>
    );
};

3. Example: Backend CRUD Operations