Lucide React Icons — Contentstack Marketplace App

A Contentstack Marketplace app that adds an icon picker powered by the lucide-react icon library. Content editors can browse, search, and select from 1,000+ icons directly within the Contentstack entry editor.

Live example: marketplace-cf-lucide-react-icons.contentstackapps.com

Features

• Custom Field — searchable icon picker with pagination, compact/expanded views, and instant preview
• JSON RTE Plugin — toolbar button to insert inline icons at the cursor position in Rich Text Editor fields
• App Configuration — choose how icon names are stored: kebab-case, camelCase, PascalCase, or JSON

Storage Formats

The app configuration screen lets admins choose the format saved to the custom field:

Format	Example Value
kebab-case (default)	"credit-card"
camelCase	"creditCard"
PascalCase	"CreditCard"
JSON	{ "name": "credit-card" }

Quick Start (Local Development)

npm install
npm run dev

This builds the RTE plugin and starts the Vite dev server at http://localhost:3000.

Build & Run (Production)

npm run build
npm run start

The Express server (server.js) serves the built app with SPA fallback routing and CORS headers for the RTE plugin bundle.

Documentation

• SETUP.md — Deploy to Contentstack Launch and configure the app in Developer Hub
• FRONTEND_INTEGRATION.md — Render selected icons on your frontend

Tech Stack

• React 18 + TypeScript
• Vite (build tooling)
• lucide-react (icon library)
• Contentstack App SDK
• Express (production server)

Scripts

Script	Description
npm run dev	Build RTE plugin + start Vite dev server
npm run build	Production build (app + RTE plugin)
npm run start	Run Express production server
npm run lint	ESLint
npm run typecheck	TypeScript type check
npm run format	Prettier formatting

License

MIT