Skip to content

Add TaskBoard, Custom Doc Viewer, and Editor.js components#8

Merged
kkoppenhaver merged 3 commits intotryretool:mainfrom
sarah-retool:main
Mar 20, 2026
Merged

Add TaskBoard, Custom Doc Viewer, and Editor.js components#8
kkoppenhaver merged 3 commits intotryretool:mainfrom
sarah-retool:main

Conversation

@sarah-retool
Copy link
Contributor

@sarah-retool sarah-retool commented Mar 19, 2026

Component Submissions: 3 Community Components

This PR adds three components to the gallery from community contributors.


1. TaskBoard

Author: @gonzalo (Retool Community)
Original Repository: https://github.com/gonzaloplaza96/retool-custom-components

Description

A kanban-style project management board with drag-and-drop functionality for organizing tasks across four columns.

Features

  • ✅ Drag-and-drop task cards between columns
  • ➕ Add new tasks using the + button
  • 📝 Rename tasks by clicking on the task name
  • 🔁 Dynamic properties per column for Retool integration

Columns

  • Backlog 🔴
  • Todo 🟡
  • In Progress 🔵
  • Done 🟢

Files Included

  • src/ - Component source code (TypeScript/React)
  • package.json - Dependencies and build configuration
  • metadata.json - Component metadata with tags: Kanban, Drag & Drop, UI Components
  • cover.png - Screenshot (129KB)
  • README.md - Installation and usage instructions

2. Custom Doc Viewer

Author: @vagkap (Retool Community)
Original Repository: https://github.com/StackdropCO/custom-doc-viewer

Description

A document viewer component for previewing .docx files in Retool applications with responsive scaling and built-in error handling.

Features

  • ✅ DOCX rendering using docx-preview library
  • ✅ Responsive scaling to fit component width
  • ✅ Base64 input support (with or without data URL prefix)
  • ✅ Configurable file size limit (default 50MB)
  • ✅ Loading and error states with ARIA support
  • ✅ Customizable background color styling

Files Included

  • src/ - Component source code (TypeScript/React)
  • package.json - Dependencies and build configuration
  • metadata.json - Component metadata with tags: PDF, File Upload, UI Components
  • README.md - Installation and usage instructions
  • ⚠️ Note: Cover image to be added in follow-up

3. Editor.js

Primary Author: @minijohn (Retool Community)
Co-Authors: @Mahmoudk3m, @vagkap
Original Repository: https://github.com/StackdropCO/editorjs-retool-component

Description

A powerful rich text editor with block-style editing, providing a modern WYSIWYG experience with clean JSON output.

Features

  • ✅ Block-style content editing (Headers, Paragraphs, Lists, etc.)
  • ✅ Rich formatting tools (Headers H1-H4, Lists, Quotes, Code blocks)
  • ✅ Advanced blocks (Tables, Checklists, Embeds for YouTube/CodePen)
  • ✅ Inline formatting (Marker, Underline, Inline code, Links)
  • ✅ Clean JSON output for easy storage and retrieval
  • ✅ Customizable tool configuration (enable/disable specific tools)
  • ✅ Dark and light mode support
  • ✅ Customizable background and text colors

Files Included

  • src/ - Component source code (TypeScript/React)
  • package.json - Dependencies and build configuration
  • metadata.json - Component metadata with tags: Rich Text, Editors, UI Components
  • cover.png - Screenshot showing the editor (64KB)
  • README.md - Installation and usage instructions

Attribution

This PR was submitted by @sarah-retool to help get these components into the official gallery.

sarah-retool and others added 2 commits March 19, 2026 15:57
TaskBoard is a kanban-style project management board with drag-and-drop
functionality. It enables visual task organization across four columns:
Backlog, Todo, In Progress, and Done.

Features:
- Drag-and-drop task cards between columns
- Add new tasks with the + button
- Rename tasks by clicking on the task name
- Dynamic properties per column for Retool integration

Component created by @gonzalo from the Retool community.

Co-authored-by: gonzaloplaza96 <gonzaloplaza96@users.noreply.github.com>
## Custom Doc Viewer
A document viewer component for previewing .docx files in Retool with
responsive scaling, base64 input, and configurable file size limits.

Features:
- DOCX rendering using docx-preview library
- Responsive scaling to fit component width
- Base64 input support (with or without data URL prefix)
- Configurable file size limit (default 50MB)
- Loading and error states with ARIA support
- Customizable styling

Note: Cover image to be added in follow-up.

Component created by @vagkap from the Retool community.

## Editor.js
A powerful rich text editor with block-style editing, providing a modern
WYSIWYG experience with clean JSON output.

Features:
- Block-style content editing
- Headers, lists, quotes, code blocks, tables, embeds
- Clean JSON output for easy storage
- Customizable tool configuration
- Dark and light mode support
- Inline formatting (marker, underline, inline code)

Component created by @minijohn, @Mahmoudk3m, and @vagkap.

Co-authored-by: vaggelis-kapetanakis <vaggelis-kapetanakis@users.noreply.github.com>
Co-authored-by: Theminijohn <Theminijohn@users.noreply.github.com>
Co-authored-by: Mahmoudk3m <Mahmoudk3m@users.noreply.github.com>
@sarah-retool sarah-retool changed the title Add TaskBoard component Add TaskBoard, Custom Doc Viewer, and Editor.js components Mar 20, 2026
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@kkoppenhaver kkoppenhaver merged commit 0522759 into tryretool:main Mar 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants