Skip to content

Commit

Permalink
add introduction post
Browse files Browse the repository at this point in the history
  • Loading branch information
souporserious committed May 15, 2024
1 parent 86bc705 commit e31dd32
Showing 1 changed file with 85 additions and 0 deletions.
85 changes: 85 additions & 0 deletions site/posts/introducing-mdxts.mdx
@@ -0,0 +1,85 @@
---
title: Introducing MDXTS
summary: A new tool for building content and documenting libraries with MDX, TypeScript, and React.
author: Travis Arnold
---

import { SignupForm } from '../app/SignupForm'

Today, I'm excited to announce the release of MDXTS v1! After years of prototyping and launching the initial preview release six months ago, MDXTS is ready for production.

MDXTS is a powerful, zero-config tool designed to simplify and enhance the process of creating content and documentation alongside your framework. Whether you're writing technical tutorials or building documentation for a library, MDXTS offers integrations, components, and utilities to make communicating your ideas frictionless.

## Features

MDXTS balances flexibility and ease of use, offering features that streamline your workflow and enhance your documentation:

- **Type-Safe Content:** Write content in MDX (Markdown with JSX) while ensuring type safety for code blocks. Type check code blocks and front matter, throwing type errors when necessary.
- **Generate Type Documentation:** Automatically gather metadata from your TypeScript types and JSDoc comments, ensuring your documentation always reflects your codebase.
- **Accurate Highlighting:** Accurately highlight code using the same advanced highlighting as your IDE.
- **Quick Info:** Interact with symbols in code blocks to better understand their context and types.
- **Route Generation:** Generate routes for a directory of MDX or TypeScript files by gathering metadata based on your filesystem.
- **Code Examples:** Render examples from a `.examples` extension or an `examples` directory. Use your framework to control the rendering of examples and add providers or custom configurations as needed.

## Why MDXTS?

Creating high-quality content and documentation is essential for delivering a great user experience. The difference between a good and exceptional product hinges on clear communication between designers, engineers, and other stakeholders. However, writing effective content and maintaining it takes time and effort and often requires an entire team. MDXTS addresses these challenges by streamlining your writing process, helping you maintain a consistent brand identity, and enabling you to produce compelling content.

## The Challenges of Technical Content

Sharing knowledge, ideas, and tutorials through engaging content is essential. We create numerous abstractions, develop tools, and publish packages to enhance workflows and improve productivity. However, effectively communicating these ideas can be challenging for several reasons:

- Writing content takes a lot of effort.
- Manually keeping documentation up to date is cumbersome.
- The development process often involves coordination between multiple bundlers.

## How Does It Work?

MDXTS takes a unique approach by integrating tightly with your framework rather than trying to be a framework itself. Instead of requiring extensive configuration or a separate build process, MDXTS uses your framework's bundler to import each module dynamically from a file glob pattern, attaching detailed metadata about each file. This approach simplifies the setup process and makes rendering directories of files in your project easy.

<Note>
MDXTS currently requires Next.js. A first-class [plugin](/packages/next) is
available to configure the MDX plugins and Webpack loader automatically. In
the future, support will be added for other frameworks.
</Note>

## Getting Started

To get started with MDXTS, run the following command in your terminal:

```sh
npm create mdxts
```

This will initialize a new MDXTS example project or help you get set up in an existing Next.js project, allowing you to start documenting your library and writing content immediately. Visit the [Getting Started](https://www.mdxts.dev/docs/getting-started) documentation for next steps and details on all of features available in MDXTS.

## Looking Ahead

As MDXTS continues to develop and improve, there are some exciting features planned for the future:

- **Premium Templates:** High-quality templates to help you get the full power of MDXTS to create stunning blogs and design systems documentation.
- **Remote Content:** Fetch content and analyze types from remote sources
- **Live Editor:** Experience real-time editing and previewing your code directly within your site.
- **Playgrounds:** Create interactive code playgrounds to demonstrate concepts and snippets dynamically.
- **Monorepos:** Add first-class support for monorepo workspaces
- **Performance Improvements:** Focus on enhancements to ensure fast build times and great performance for larger projects.

To support these features and the future development of MDXTS, please consider [becoming a sponsor](https://github.com/sponsors/souporserious) and subscribing to the newsletter:

<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '3rem 0',
gap: '2rem',
backgroundColor: 'var(--color-surface-interactive)',
}}
>
<h2 style={{ margin: 0 }}>Stay Updated</h2>
<SignupForm />
</div>

## Conclusion

Writing interactive and engaging content is now easier than ever. MDXTS streamlines the writing process and provides powerful tools for content authoring, type-safe documentation, and accurate code highlighting letting you focus on what matters most: delivering valuable, engaging content.

0 comments on commit e31dd32

Please sign in to comment.