Learning TypeScript by Building a Markdown Editor

When I wanted to learn TypeScript, I decided not to just read the docs — I built a small project with the help of an LLM: a Markdown Editor using Next.js and TypeScript.

👉 Code: Markdown Editor

My Observations

UI development is not very intuitive to me, but since TypeScript code is less verbose than Java, generating fixes and iterating with an LLM felt simpler.
I provided the final prompt I gave an LLM (Claude) to generate the code. It took some iterations to refine.
If I had just built something in TypeScript without UI, I would have been more comfortable. Adding a UI layer made it more complex.
I tried to understand most of the code I committed, but I wouldn’t call myself an expert yet.
Will I experiment with UI using LLMs again? Definitely. It was a lot of fun.

Note: You can check out the prompt and the github repository. The rest might bore you, so feel free to skip it.

The Prompt I Used

Here’s the exact prompt that generated the project:

🚀 Prompt: Next.js + TypeScript Markdown Editor with Toolbar

Build a Markdown Editor using Next.js + TypeScript + TailwindCSS with a live preview.

✅ Features to Implement

Core Editor
- Two-pane layout:
  - Left → Markdown input (<textarea>)
  - Right → Live preview (rendered using react-markdown)
- Use CSS Grid/Flexbox for clean split layout

Toolbar (Formatting Buttons)
- Undo & Redo → rely on browser <textarea> undo/redo stack
- Bold → Inserts **selected text**
- Italic → Inserts *selected text*
- Headings H1–H6 → Inserts #, ##, … ######
- Unordered List → Inserts - item
- Ordered List → Inserts 1. item
- Blockquote → Inserts > quote
- Code Block → Inserts fenced triple backticks (```

)
- Table → Inserts a Markdown table skeleton
- URL/Link → Inserts [text](url)

Markdown Rendering
- Use react-markdown with remark-gfm for:
  - Tables
  - Lists
  - Strikethrough
  - URLs
- Add syntax highlighting in code blocks with react-syntax-highlighter 
  (or Prism.js/Highlight.js)

Other Features
- Persistence → Save editor state in localStorage and restore on reload
- File Import/Export →
  - Export current content as .md file
  - Import .md file via <input type="file"> and load into editor
- Light/Dark Theme → Toggle using Tailwind dark mode

🔑 Requirements
- Must be Next.js + TypeScript
- Use TailwindCSS for styling
- Strong typing everywhere (e.g., React.ChangeEvent<HTMLTextAreaElement>)
- Toolbar actions should insert Markdown at the cursor position
- Modular code (components: Editor, Preview, Toolbar, ThemeToggle)
- Add comments where necessary
- Include a README.md with setup instructions
- Give a working project

Why TypeScript?

Coming from Java, here’s what I missed in plain JavaScript:

Types → Catching errors before runtime
Interfaces → Defining object shapes
Tooling → Better autocomplete and refactoring

TypeScript provides these while staying close to JavaScript.

Key TypeScript Features

Here are the beginner-friendly features:

1. Type Annotations


ts
let username: string = "Raj";
let age: number = 30;
let isActive: boolean = true;

// Prevents mistakes like:
age = "thirty"; // ❌ error

2. Functions with Types


ts
function add(a: number, b: number): number {
  return a + b;
}

// TypeScript catches:
add(2, "3"); // ❌ error

3. Arrays & Objects


ts
let numbers: number[] = [1, 2, 3];

let user: { id: number; name: string } = {
  id: 1,
  name: "Raj"
};

4. Interfaces


ts
interface User {
  id: number;
  name: string;
}

let u: User = { id: 1, name: "Alice" };

5. Generics


ts
function identity<T>(arg: T): T {
  return arg;
}

let num = identity<number>(10);   // returns 10
let str = identity<string>("Hi"); // returns "Hi"

This clicked quickly for me since it’s similar to Java Generics.

👉 Check out the full project here:
GitHub Repo – Markdown Editor with TypeScript