A React-based user interface for interacting with an Earley Parser server via a REST API, which must be running to test full functionality (you can clone it here).
A live version of the UI is available. The Earley Parser backend is hosted on Render.com. Since Render automatically suspends free-tier services when inactive, the server may take up to a minute to spin up after a period of inactivity. If the first API request takes longer than expected, please wait and try again.
- User-friendly interface for sending parsing requests
- Displays parsed results from the Earley Parser backend
- Built with React, Vite, and TypeScript
- Styled using Tailwind CSS
- Fast and lightweight frontend optimized for performance
Clone the repository:
git clone <repo-url>cd parser-ui
Install dependencies:
npm install
Start the development server:
npm run dev
parser-ui/
│── src/ # Source code
│ ├── components/ # Reusable UI components
│ ├── pages/ # Application pages
│ ├── api/ # API client functions
│ ├── hooks/ # Custom React hooks
│ ├── App.tsx # Main application entry point
│ ├── main.tsx # React entry point
│── public/ # Static assets
│── index.html # Root HTML file
│── package.json # Project configuration
│── tailwind.config.ts # Tailwind CSS configuration
│── tsconfig.json # TypeScript configuration
│── vite.config.ts # Vite configuration
If the parser backend requires an API key or runs on a configurable URL, create a .env file in the root directory, or modify the url/port accordingly in the code.
VITE_API_URL=http://localhost:5000
Replace the URL with the actual backend server URL if necessary.
npm run dev– Start the development servernpm run build– Build the project for productionnpm run preview– Preview the production buildnpm run lint– Run ESLint on the codebase
To build and deploy the app:
npm run buildThis generates a dist/ folder with the production-ready files.
You can deploy it using services like Vercel, Netlify, or Render.