Features • Questions • Contributing • Read More • The Team
AthenaJS is a component visualizer workshop that allows developers to quickly develop and edit their React components in isolation without codebase integration.
Easy to use: AthenaJS is a standalone electron application that allows developers to import their own React components or create components from scratch within the application's code editor.
Dynamic: Developers can mock HTTP requests, style, and change the functionality of their components within the application's code editors. Changes are reflected in the renderer with the press of a button!
UI Mode: After developers have created/edited their react components, they can navigate to the UI Mode section and prototype UIs using components from their library.
You can find documentation and download the app on our website
If you just want to download the app, you can find it under "Releases" on the right-hand side of GitHub!
Mac users: The application needs to be approved in the "Security and Privacy" tab before it can be run.
Interested in what you can do with AthenaJS? Here is a quick summary of all the great features you can start developing with!
Please note AthenaJS only works for functional components, but work is currently being done to add support for class components!
Screen.Recording.2023-04-10.at.11.55.13.AM.mov
💠 You can develop components from scratch and export them to your React project using our code editors! The JSX editor holds the return statement of the component and the body contains everything else (your hooks, functions, etc.). Press update view to view your changes live in the component renderer. Save your progress by choosing a name for your component and saving it to the component library.
Screen.Recording.2023-04-10.at.12.09.08.PM.mov
💠 If you already have components built for your project and want to edit them, open the file explorer and import any of your React components! Our parser will inject your code into the editors so you can get started easily. Simply define any props your component relies on in the body editor and update the view to get your component working in the app!
Screen.Recording.2023-04-10.at.12.13.14.PM.mov
💠 If your component makes an http request with fetch, AthenaJS includes feck-motch integration to mock the response. If you are interested in all of the great features available to you with feck-motch, check out the documentation . By default, our settings intercept all requests and respond with an object {data: 'mock data'} to get you started quickly.
Screen.Recording.2023-04-10.at.12.15.18.PM.mov
💠 AthenaJS includes styled-components integration, check out the documentation here to get started. Styled components lets you write actual CSS code to style your components, so you can get started quick and easy! Declare your styled component variable in the body editor and write CSS or copy over code from your CSS file to quickly style your component!
Screen.Recording.2023-04-10.at.12.16.52.PM.mov
💠 Curious which components are causing or have the potential to cause a bottleneck in your application? Every time you render a new component, the render time is captured using the React Profiler API, the same API that React Dev Tools are built on. Render times can be added to a bar graph with the click of a button to easily compare render times across different components.
Screen.Recording.2023-04-10.at.12.25.57.PM.mov
💠 Press 'Save Library' to save your component library to your home directory. Your components will be persisted between sessions, so you can easily pick up from where you left off. Render any of your components and make changes to them, delete them from your library, or export them as a jsx file to easily integrate the components you develop into your React projects.
Screen.Recording.2023-04-10.at.12.29.10.PM.mov
💠 Once you build a component library, you can easily prototype UIs using the drag and drop UI whiteboard. The whiteboard area can be saved as a screenshot to your downloads folder by pressing the screenshot button on the top right portion of the screen.
💠 One of the team's favorite uses of this tool is to compare similar components. Not sure which navbar or button you like best? Add them to the whiteboard and compare them side-by-side!
If you have any questions or need help with the project, please don't hesitate to ask! You can reach out to us on Discord or create an issue on this repo.
Navigate to the CONTRIBUTING.md file to learn how you can contribute to AthenaJS!
Check out our Medium article to read more!
AthenaJS Core Team
| Developed By | Github | |
|---|---|---|
| Christopher Long |  |
 |
| Daniel Chang | |
|
| Derrick Oh | |
|
| Matthew Fukudome | |
|
| Ryan Motamen | |
|
Special thanks to our friend Michelle for the logo and icon design!
The Athena JS repo is managed as a monorepo check out the CONTRIBUTING.md for development and check here for the doc website.
Athena is MIT licensed.