{"id":24351173,"url":"https://github.com/david-mwas/monokai-code-editor","last_synced_at":"2026-01-29T03:06:15.047Z","repository":{"id":233834562,"uuid":"787881427","full_name":"David-mwas/monokai-code-editor","owner":"David-mwas","description":"Monokai Code Editor is a web-based code editor built using Monaco Editor, React, Chakra UI, Tailwind CSS, and integrates with the Piston API for managing packages and executing user-defined code.","archived":false,"fork":false,"pushed_at":"2024-10-23T06:28:04.000Z","size":453,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T09:44:13.765Z","etag":null,"topics":["chakra-ui","monaco-editor","reactjs","tailwindcss","vitejs"],"latest_commit_sha":null,"homepage":"https://monokai.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/David-mwas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-17T11:09:05.000Z","updated_at":"2024-10-23T06:31:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"fd87f00f-0436-459a-a603-3862854f2ae7","html_url":"https://github.com/David-mwas/monokai-code-editor","commit_stats":null,"previous_names":["david-mwas/monokai-code-editor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/David-mwas/monokai-code-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-mwas%2Fmonokai-code-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-mwas%2Fmonokai-code-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-mwas%2Fmonokai-code-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-mwas%2Fmonokai-code-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/David-mwas","download_url":"https://codeload.github.com/David-mwas/monokai-code-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-mwas%2Fmonokai-code-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28861670,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T22:56:21.783Z","status":"online","status_checked_at":"2026-01-29T02:00:06.714Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chakra-ui","monaco-editor","reactjs","tailwindcss","vitejs"],"created_at":"2025-01-18T14:59:08.974Z","updated_at":"2026-01-29T03:06:15.032Z","avatar_url":"https://github.com/David-mwas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Monokai Code Editor\n\nMonokai Code Editor is a web-based code editor built using Monaco Editor, React, Chakra UI, Tailwind CSS, and integrates with the Piston API for managing packages and executing user-defined code.\n\n![alt text](public/monakaiplayground.png)\n\n![alt text](public/errorstate.png)\n\n![alt text](public/lang.png)\n\n## Overview\n\nMonokai Code Editor provides a sleek and customizable interface for writing and executing code snippets in various programming languages. Leveraging the power of Monaco Editor, users can enjoy features like syntax highlighting, code autocompletion, and code formatting.\n\n## Features\n\n- **Syntax Highlighting**: Utilizes the Monokai color scheme for visually appealing syntax highlighting.\n- **React Integration**: Built with React to provide a smooth and interactive user experience.\n- **Chakra UI Components**: Utilizes Chakra UI components for building responsive and accessible user interfaces.\n- **Tailwind CSS**: Enhances styling using Tailwind CSS utility classes for rapid development.\n- **Piston API Integration**: Interacts with the Piston API to manage packages and execute user-defined code seamlessly.\n\n## Getting Started\n\nFollow these steps to set up and run the Monokai Code Editor locally:\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/David-mwas/monokai-code-editor.git\n   ```\n\n2. Install dependencies:\n   ```bash\n   cd monokai-code-editor\n   npm install\n   ```\n3. Start the development server:\n\n   ```bash\n   npm run dev\n\n   ```\n\n4. Open your browser and navigate to `http://localhost:3000` to view the Monokai Code Editor.\n\n## Usage\n\n**_Writing Code:_** Start writing your code in the editor pane using your preferred programming language.\n\n**_Executing Code:_** Click the \"Run\" button to execute the code using the Piston API.\n\n**_Viewing Output:_** The output of the executed code will be displayed below the editor pane.\n\n## API Integration\n\n**_Monokai Code Editor_** integrates with the Piston API for managing packages and executing user-defined code. The API endpoints are exposed on port `2000 at /api/v2/`. All inputs are validated, and appropriate error responses are handled.\n\nFor more information about the Piston API, refer to the [official documentation](https://piston.readthedocs.io/en/latest/api-v2/)\n\n## Contributing\n\nContributions are welcome! If you encounter any issues or have suggestions for improvements, feel free to open an issue or submit a pull request.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-mwas%2Fmonokai-code-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavid-mwas%2Fmonokai-code-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-mwas%2Fmonokai-code-editor/lists"}