KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

Modern.TiddlyDev

★ 74 Open GitHub ↗

Modern TiddlyWiki Developing Environment

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![](https://raw.githubusercontent.com/tiddly-gittly/Modern.TiddlyDev/master/src/doc/banner.png)

# Modern.TiddlyDev

[![](https://img.shields.io/github/stars/tiddly-gittly/Modern.TiddlyDev?style=for-the-badge&color=red)](https://github.com/tiddly-gittly/Modern.TiddlyDev)&nbsp;&nbsp;[![](https://img.shields.io/github/forks/tiddly-gittly/Modern.TiddlyDev?style=for-the-badge)](https://github.com/tiddly-gittly/Modern.TiddlyDev)&nbsp;&nbsp;[![](https://img.shields.io/github/issues/tiddly-gittly/Modern.TiddlyDev?style=for-the-badge)](https://github.com/tiddly-gittly/Modern.TiddlyDev)&nbsp;&nbsp;[![](https://img.shields.io/github/watchers/tiddly-gittly/Modern.TiddlyDev?style=for-the-badge&color=blueviolet)](https://github.com/tiddly-gittly/Modern.TiddlyDev)&nbsp;&nbsp;[![](https://img.shields.io/github/license/tiddly-gittly/Modern.TiddlyDev?style=for-the-badge&label=Licence)](https://github.com/tiddly-gittly/Modern.TiddlyDev)

[![](https://img.shields.io/badge/加入-太微_中文社区-blue?style=for-the-badge)](https://github.com/tiddly-gittly)&nbsp;&nbsp;[![](https://img.shields.io/github/followers/Gk0Wk?style=for-the-badge&label=Gk0Wk&color=critical)](https://github.com/Gk0Wk)

</center>

[View Tutorials](https://tiddly-gittly.github.io/Modern.TiddlyDev/)

Modern.TiddlyDev is a one-click development environment for various TiddlyWiki plug-in developers built on a modern front-end technology stack, with the following features and functions:

- Compile, test and publish plug-ins with one click:
  - Open the page server in development mode, which can be tested in the browser, automatically detect changes to the plug-in files and synchronize the plug-in content updates to the browser page, realizing the WYSIWYG of plug-in development;
  - One-click plugin building and support for generating plugin library for use by your subscribers.
  - Has a built-in GitHub Page publishing script that automatically publishes written plugin documentation pages and plugin library to the Internet;
  - Built-in GitHub Release script, which releases the plugin according to the version specified by the git tag;
- Tailored for TypeScript plugin development, so it is now easy to use TypeScript development in TiddlyWiki:
  - Multi-entry file compilation is supported, and various plugins can be easily written in TiddlyWiki;
  - Support for `.ts`, `.tsx`, `.jsx`, `.mjs`, `.cjs` files compiled with the [tw-react](https://github.com/tiddly-gittly/tw-react) plugin for React development in TiddlyWiki;
  - Use [tw5-typed](https://github.com/tiddly-gittly/TW5-Typed) to type annotate TiddlyWiki API to bring a native TypeScript experience to development;
  - Use the full amount of ESLint and Prettier rules provided by [Modern.JS](https://modernjs.dev/) to normalize the code;
  - Incremental project builds using the extremely fast [esbuild](https://esbuild.github.io/), which makes writing code a blast;
  - Support for setting browser compatibility ranges for plugins using [browserslist](https://browsersl.ist/);
  - Automatically generate sourcemap for source code (start by default when developing, specify to turn on when building), no need to worry about debugging!
  - The possibility of introducing CSS, JSON, etc. into the script;
  - Automatic volume compression of the plug-in (can be turned off);
  - Automatic generation of hash-check signatures for the generated plug-ins;

Don't worry, even if you are not good at programming, it doesn't matter, Modern.TiddlyDev can be your development tool as well. No code plugin development can be an enjoyable development experience as well!

There's a lot of work here, but it's just Out-of-the-Box for you. Use it and get started on your modern TiddlyWiki plugin development journey!

## TypeScript Setup

Modern.TiddlyDev now loads [tw5-typed](https://github.com/tiddly-gittly/TW5-Typed) in the supported way:

```json
{
  "compilerOptions": {
    "types": ["node", "tw5-typed"]
  }
}
```

And the template keeps a project ambient entry in `src/global.d.ts`:

```typescript
/// <reference types="tw5-typed" />
```

This makes both `import type { ... } from 'tiddlywiki'` and the global `$tw` available to TypeScript and VS Code. Do not put `tw5-typed` into `typeRoots`; it is a normal package with its own `types` entry, and using `typeRoots` there can stop the editor from resolving the declarations correctly.

![](https://raw.githubusercontent.com/tiddly-gittly/Modern.TiddlyDev/master/src/doc/wysiwyg-demo.gif)

## Playwright E2E Test

This project now supports browser E2E tests with Playwright and `pnpm`.

- Test files are placed in `wiki/tiddlers/tests/playwright`
- Example render test: `wiki/tiddlers/tests/playwright/example-widget.spec.ts`
- Example click behavior test: `wiki/tiddlers/tests/playwright/example-widget-click.spec.ts`
- The sample tiddler used by the test is `wiki/tiddlers/tests/playwright/PlaywrightExampleWidget.tid`

Run tests:

```bash
pnpm test:playwright
```

`pnpm test:playwright` runs in headless mode (no visible browser), which is suitable for CI and quick local checks.

Run tests in headed mode:

```bash
pnpm test:playwright:headed
```

`pnpm test:playwright:headed` opens a visible browser window, which is useful for debugging interaction steps.

Modern.TiddlyDev

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README