Teable Todo List Plugin Template

This project is a Todo List plugin template based on Next.js and Teable, designed for secondary development and customization of your own Teable plugin.

Features

• 📝 Basic Todo List functionality
• ⚡️ Integrated Teable plugin development environment
• 🌈 Multi-theme support (light/dark)
• 🌍 Internationalization (i18n) support
• 🪄 Easy to extend and customize

Dependencies

• Next.js
• @teable/core
• @teable/sdk
• @teable/openapi
• @teable/ui-lib
• @teable/next-themes
• @tanstack/react-query

Getting Started

1. Install dependencies

npm install

2. Start the development server

npm run dev

Visit http://localhost:3000 to view the app.

3. Build for production

npm run build

4. Start in production mode

npm start

Project Structure

• src/app/page.tsx: App entry, integrates i18n, environment, theme, etc.
• src/app/Main.tsx: Main business entry, integrates Teable SDK, theme, QueryClient
• src/components/TodoListPages.tsx: Main logic for the Todo List page
• src/components/context/EnvProvider.tsx: Injects environment variables
• src/components/context/I18nProvider.tsx: Internationalization support

Environment Variables & Plugin Parameters

The EnvProvider component automatically reads plugin parameters (such as lang, baseId, pluginId, etc.) from the URL, no manual configuration required.