{"id":13801996,"url":"https://github.com/FermORG/FermionJS","last_synced_at":"2025-05-13T12:32:09.394Z","repository":{"id":23690438,"uuid":"99611729","full_name":"FermORG/FermionJS","owner":"FermORG","description":"Visual Prototyping Tool for React Applications","archived":false,"fork":false,"pushed_at":"2023-01-11T18:50:15.000Z","size":20939,"stargazers_count":205,"open_issues_count":13,"forks_count":5,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-05T19:13:58.439Z","etag":null,"topics":["demo","electron-app","javascript","javascript-applications","javascript-tools","prototype","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FermORG.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-07T19:18:23.000Z","updated_at":"2024-08-04T03:03:58.000Z","dependencies_parsed_at":"2023-01-14T07:45:24.452Z","dependency_job_id":null,"html_url":"https://github.com/FermORG/FermionJS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FermORG%2FFermionJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FermORG%2FFermionJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FermORG%2FFermionJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FermORG%2FFermionJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FermORG","download_url":"https://codeload.github.com/FermORG/FermionJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253942524,"owners_count":21988072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["demo","electron-app","javascript","javascript-applications","javascript-tools","prototype","react","reactjs"],"created_at":"2024-08-04T00:01:32.578Z","updated_at":"2025-05-13T12:32:08.967Z","avatar_url":"https://github.com/FermORG.png","language":"JavaScript","readme":"\u003cp align='center'\u003e\u003cimg height ='100' width='283' src=\"https://github.com/FermORG/fermorg.github.io/blob/master/assets/images/logo1.png?raw=true\" /\u003e\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src=\"https://travis-ci.org/FermORG/FermionJS.svg?branch=master\" alt=\"Build Status\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://travis-ci.org/FermORG/FermionJS\"\u003e\n\u003c/p\u003e\n\n# Demo\n\n[demo page](https://fermorg.github.io/fermion/)\n\n# Features\n\n## Manipulation\n\nFermion is all about ease of use and speed. Drag and drop, resize, and nest your components to prototype your app layout.\n\n\u003cimg src=\"https://raw.githubusercontent.com/FermORG/fermorg.github.io/master/assets/images/manipulation.gif\" alt=\"Fermion Manipulation\" /\u003e\n\n## Configuration\n\nConfigure your components in real-time. Fermion allows you to apply style and add event-handling to your components.\n\n\u003cimg src=\"https://github.com/FermORG/fermorg.github.io/blob/master/assets/images/config.gif?raw=true\" alt=\"Fermion Manipulation\" /\u003e\n\n## Preview\n\nFermion leverages webpack to create a live preview of your new prototype. Simply export your project and our simulator will display how your project will look in the browser.\n\n## Exporting\n\nOnce you are done prototyping, the real fun begins! Fermion exports your prototype along with all of your configurations as working code so that you can continue to refine your project in the setting of your choice.\n\n## Setup and Run!\n\n```\nnpm install\nnpm run dev\n```\n\nfor yarn users\n\n```\nyarn install\nyarn dev\n```\n\n# How To Use\n\n## Adding Methods\n\nMethods can be added to your prototype using the built in Code Editor. Simply open it up, and begin typing. The Exporter will assume that all of these methods should be attached to the parent component (‘App.js’), and will include them there. It will automatically bind ‘this’ in the constructor, and it will pass that down the props chain to any components that include it in an event handler.\n\nFermion takes [method definitions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions) written in ES6 syntax, and you must following the closing bracket with an ‘@’ character to mark the end of a method.\n\n\u003cimg src=\"https://github.com/FermORG/fermorg.github.io/blob/master/assets/images/methods.png?raw=true\" alt=\"Adding Methods in FermionJS\"\u003e\n\n## Event Handlers\n\nEvent handlers are appended to components by selecting a component, and then opening the ‘Events’ Tab. Enter the Handler’s name in the input box, which should be a valid React Event Handler (e.g. ‘onClick’, ‘onChange’). Then, when the event appears below, simply add your logic to the input on its right (defaults to ‘null’). You may write out a unique function, or add a callback pointing to a method, as shown before. Fermion will automatically detect the method in your callback, and lift it up through the properties chain. No need to worry about passing it down yourself!\n\n\u003cimg src=\"https://github.com/FermORG/fermorg.github.io/blob/master/assets/images/events.png?raw=true\" alt=\"Adding Event Handlers in FermionJS\" /\u003e\n\n## Adding Props\n\nProps can be added in a similar manner to events. Simply insert them on the props tab, and fermion will lift them up to state when you export your code, and update the props chain accordingly. Apply Props directly to the component that needs them, and Fermion will take care of the rest.\n\n## Adding State\n\nState is applied to App.js, and commingled with any added Props when you export your code. Note that this means that any Props values that share the same key as a State value will overwrite the value in State, as Fermion will decide they are the same and will prefer lifted values to values added directly to State.\n\n# Testing\n\nto run tests\n\n```\nnpm run test\n```\n\nto run tests and generate a code coverage report.\n\n```\nnpm run test-jest\n```\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFermORG%2FFermionJS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFermORG%2FFermionJS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFermORG%2FFermionJS/lists"}