TS Markdown

A type-safe, component based markdown engine for embedding markdown content with TypeScript. Create dynamic, template-driven markdown with full type support.

⚠️ Early Alpha: This library is in early alpha and is not stable for production applications.

✨ Features

1. TypeScript Integration - Full TypeScript support with type checking and IntelliSense
2. Template Interpolation - Dynamic content with {{ expression }} syntax
3. Conditional Rendering - Smart conditional blocks with ternary operators and logical AND
4. Developer Tools - Comprehensive CLI, VS Code extension, and testing utilities

🚀 Quick Start

Installation

npm install typescriptmd
# or
bun add typescriptmd

Create Your First TSMD File

mkdir tsmd

// /tsmd/Welcome.tsmd
function Welcome() {
  const appName = 'My App';
  const version = '1.0.0';
  const isProduction = false;

  return (
    # Welcome to {{ appName }}! 🎉

    Current version: **{{ version }}**

    {{ isProduction ? (
      ## Production Mode ✅
    ) : (
      ## Development Mode 🚧
    ) }}
  )
}

Basic Usage

npm run typescriptmd

Then, you will see .ts files output in /tsmd/_generated

📖 Documentation

Core Concepts

1. Template Interpolation

Use {{ expression }} to embed dynamic content:

function UserProfile() {
  const user = { name: 'Alice', age: 30, skills: ['React', 'TypeScript'] };

  return (
    # {{ user.name }}'s Profile

    **Age:** {{ user.age }}

    **Skills:** {{ user.skills.join(', ') }}

    **Bio:** {{ user.age > 25 ? 'Experienced developer' : 'Junior developer' }}
  )
}

2. Conditional Rendering

Create dynamic content with conditional blocks:

function Dashboard() {
  const { user, isLoggedIn } = useAuth();
  const notifications = getNotifications();

  return (
    # Dashboard

    {{ isLoggedIn && (
      Welcome back, {{ user.name }}!
    ) }}

    {{ !isLoggedIn && (
      Please [log in](./login) to continue.
    ) }}

    {{ notifications.length > 0 && (
      ## Notifications ({{ notifications.length }})
      {{ notifications.map(n => `- ${n.message}`).join('\n') }}
    ) }}

    {{ notifications.length === 0 && (
      No new notifications.
    ) }}
  )
}

3. Component Integration

Use components with the <@ComponentName/> syntax:

import { FeatureDetailView } from './components';

function Homepage() {
  const features = ['Fast', 'Type-safe', 'Developer-friendly'];

  return (
    # Welcome to TS Markdown

    Get started in minutes with our powerful framework.

    ## Features

    {{ features.map(feature => (
      <@FeatureDetailView feature="${feature}" />
    ) }}
  )
}

Install the TS Markdown VS Code extension for:

• Syntax highlighting for TSMD files
• IntelliSense for template expressions
• Live preview of TSMD content

🤝 Contributing

We welcome contributions!

Development Setup

git clone https://github.com/andrewtdiz/tsmarkdown
cd tsmarkdown
npm install
npm run dev

Running Tests

npm test
# or with coverage
npm test --coverage

📜 License

MIT © TS Markdown Team

🔗 Links

• Documentation
• VS Code Extension

Made with ❤️ by the TS Markdown team