You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+10-10Lines changed: 10 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -10,13 +10,13 @@
10
10
**ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type checking of **TypeScript**.
11
11
In other words, **you can draw prototypes and export React / Typescript code!**
12
12
13
-
**ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and a _real-time component code preview_. The user can create components and drag _instances_ of these components, as well as nested HTML elements, onto the canvas. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
13
+
**ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and a _real-time component code preview_. The user can create components and drag _instances_ of these components, as well as HTML elements, onto the canvas. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
14
14
15
15
**New with version 3.0:**
16
16
17
17
- Export code as a [Next.js](https://nextjs.org/) project
18
18
- Create nestable components/HTML elements using a drag-and-drop canvas
19
-
- Add CSS to components
19
+
- Add CSS to any element on the canvas
20
20
- Components and HTML canvas elements are rendered in the canvas in the same way they'll be rendered in the exported project
21
21
- View dynamically generated Next.js or classic React code as you build your project
22
22
- Authenticate with Github or email
@@ -33,18 +33,18 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
33
33
34
34
### How to use
35
35
36
-
-**Log in:** Sign up through email/Github if you would like to save your projects to the cloud. Otherwise, select **Continue as Guest**
37
-
-**Select project type:** By default, new projects will be Next.js projects, but you can toggle your project to be a normal React application by selecting "Classic React" in the bottom-right corner.
36
+
-**Log in:** Sign up through email/Github if you would like to save your projects to the cloud. Otherwise, select _Continue as Guest_
37
+
-**Selectproject type:** By default, new projects will be Next.js projects, but you can toggle your project to be a normal React application by selecting "Classic React" in the bottom-right corner.
38
38
-**Next.js** projects allow you to easily create routing between pages within ReacType and render content with static rendering.
39
39
-**Classic React** projects are vanilla React. You can create multiple "root" components, but routing between these root components is enabled by default.
40
-
-**Add components:** Add a new component in the left panel. If the **Page** checkbox is selected, the component will become a page that can be routed to. For example, a page component named 'Home', the component's corresponding route will be '/Home'. [Learn more about Next.js routing](https://nextjs.org/docs/routing/introduction).
40
+
-**Add components:** Add a new component in the left panel. If the _Page_ checkbox is selected, the component will become a page that can be routed to. For example, a page component named 'Home', the component's corresponding route will be '/Home'. [Learn more about Next.js routing](https://nextjs.org/docs/routing/introduction).
41
41
-**Create instances of components/HTML elements:** Each component has its own canvas where you can see how any instances of nested components or HTML elements will render in production. To create an instance of a component or traditional HTML element in the canvas, simply drag it onto the canvas. The following elements have special properties when they're dragged onto the canvas:
42
42
-**Page/root components:** Page/root components cannot be dragged into other components.
43
-
-**Divs:** Divs are arbitrarily nestable. This feature is useful when creating complex layouts.
44
-
-**Navigation components:** Next.js projects have "Navigation components" which allow you to create client-side rendered links between your page components.
45
-
-**Update CSS and delete instances:** Click on the component canvas or an instance to view/edit CSS attributes in the right panel. Updates made to the CSS will render in the canvas on **Save**.
46
-
-**Save your project:** Select **Save Project** to save a new project to the cloud. Once you've created a new project in the cloud, it will be autoamtically saved on each change. You can open any of your other saved projects by selecting **Open Project**
47
-
-**Export your project:** Select **Export Project** to save your project locally. You will have the option of exporting either a fully functional application or only exporting the component files.
43
+
-**Divs:** Divs are arbitrarily nestable.
44
+
-**Navigation components:** Next.js projects have "Navigation components" which allow you to create links between your page components.
45
+
-**Update CSS and delete instances:** Click on the component canvas or an instance to view/edit CSS attributes in the right panel. Updates made to the CSS will render in the canvas on _Save_.
46
+
-**Save your project:** Select _Save Project_ to save a new project to the cloud. Once you've created a new project in the cloud, it will be autoamtically saved on each change. You can open any of your other saved projects by selecting _Open Project_.
47
+
-**Export your project:** Select _Export Project_ to save your project locally. You will have the option of exporting either a fully functional application or only exporting the component files.
0 commit comments