A powerful and user-friendly JSON editor application designed for Contentstack's marketplace. This app provides an enhanced JSON editing experience with support for both object and stringified JSON formats, making it ideal for adding JSON data.
- Advanced JSON Editor: Built with
jsoneditor-reactfor a rich editing experience - Multiple View Modes: Support for code, form, text, tree, and view modes
- Flexible Data Format: Choose between JSON object and stringified JSON formats
- Contentstack Integration: Seamless integration with Contentstack App SDK
- Error Tracking: Built-in error tracking and analytics
- Responsive Design: Modern UI with Venus design system
- TypeScript Support: Full TypeScript implementation for better development experience
- Comprehensive Testing: Unit tests with Jest and E2E tests with Playwright
- Node.js (v16 or higher)
- npm or yarn
- Contentstack account and stack
-
Clone the repository
git clone https://github.com/contentstack/marketplace-jsoneditor-app.git cd marketplace-jsoneditor-app -
Install dependencies
cd ui npm install -
Environment Setup Create a
.envfile in theuidirectory:cp .env.example .env
Add your Contentstack configuration:
ENV_URL=https://your-contentstack-instance.com STACK_UID=your-stack-uid APP_HOST_URL=http://localhost:3000
cd ui
npm startThe application will be available at http://localhost:3000
cd ui
npm run buildThe app provides a configuration screen where you can set:
- Data Format: Choose between JSON Object and JSON Stringified formats
- Help Tooltips: Interactive help system for better user guidance
The JSON editor can be used as a custom field in Contentstack entries:
- Navigate to your content type
- Add the JSON Editor custom field
- Configure the data format in the app configuration
- Start editing JSON data with the rich editor interface
The app supports the following configuration options:
| Option | Type | Description |
|---|---|---|
isStringified |
boolean | Controls whether data is saved as stringified JSON or object |
| Variable | Description | Required |
|---|---|---|
ENV_URL |
Contentstack environment URL | Yes |
STACK_UID |
Your Contentstack stack UID | Yes |
APP_HOST_URL |
App host URL for testing | Yes |
Run unit tests with Jest:
cd ui
npm testRun end-to-end tests with Playwright:
# Run all browsers
npm run test:chrome
npm run test:firefox
npm run test:safari
# Run with headed mode (visible browser)
npm run test:chrome-headed
npm run test:firefox-headed
npm run test:safari-headedGenerate coverage report:
npm test -- --coverageui/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── jsoneditor/ # JSON editor component
│ │ ├── ErrorBoundary/ # Error boundary component
│ │ └── venus-help/ # Help icon component
│ ├── containers/ # Main app containers
│ │ ├── App/ # Main app component
│ │ ├── ConfigScreen/ # Configuration screen
│ │ └── CustomField/ # Custom field implementation
│ ├── common/ # Shared utilities and types
│ │ ├── constants/ # App constants
│ │ ├── locale/ # Internationalization
│ │ ├── types/ # TypeScript type definitions
│ │ └── utils/ # Utility functions
│ ├── hooks/ # Custom React hooks
│ └── index.tsx # App entry point
├── tests/ # Test files
│ ├── e2e/ # End-to-end tests
│ └── pages/ # Page object models
├── public/ # Static assets
└── package.json # Dependencies and scripts
- Location:
src/components/jsoneditor/index.tsx - Purpose: Main JSON editing interface
- Features: Multiple view modes, syntax highlighting, validation
- Location:
src/containers/ConfigScreen/index.tsx - Purpose: App configuration interface
- Features: Data format selection, help tooltips
- Location:
src/containers/CustomField/index.tsx - Purpose: Contentstack custom field implementation
- Features: SDK integration, data persistence
# Fix linting issues
npm run lint:fix
# Pre-commit hook
npm run precommitThe app uses react-app-rewired for custom build configuration:
- Babel Configuration: Custom Babel setup for modern JavaScript features
- Webpack Overrides: Custom webpack configuration for JSON editor
- TypeScript Support: Full TypeScript compilation
We welcome contributions! Please follow these guidelines:
- Fork the repository
- Create a feature branch
git checkout -b feature/your-feature-name
- Make your changes
- Run tests
npm test npm run test:chrome - Commit your changes
git commit -m "feat: add your feature description" - Push to your fork
git push origin feature/your-feature-name
- Create a Pull Request
- Follow TypeScript best practices
- Use functional components with hooks
- Write comprehensive tests
- Follow the existing code structure
- Use meaningful commit messages
- Unit tests for all new components
- E2E tests for user workflows
- Maintain test coverage above 80%
| Script | Description |
|---|---|
npm start |
Start development server |
npm run build |
Build for production |
npm run test:chrome |
Run E2E tests in Chrome |
npm run lint:fix |
Fix linting issues |
-
App SDK Initialization Error
- Ensure Contentstack credentials are correct
- Check network connectivity
- Verify app location configuration
-
JSON Editor Not Loading
- Clear browser cache
- Check for JavaScript errors in console
- Verify JSON editor dependencies
-
Test Failures
- Ensure all dependencies are installed
- Check environment variables
- Verify test data setup
Enable debug logging:
DEBUG=* npm startThis project is licensed under the MIT License - see the LICENSE file for details.
- Contentstack for the App SDK
- JSONEditor for the JSON editing capabilities
- React for the UI framework
- Playwright for E2E testing
- Issues: GitHub Issues
- Documentation: Wiki
Made with ❤️ for the Contentstack community