Skip to content

Commit 42c6f96

Browse files
committed
Updated README with release 3.0 details
1 parent 448d54f commit 42c6f96

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

README.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@
1010
**ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type checking of **TypeScript**.
1111
In other words, **you can draw prototypes and export React / Typescript code!**
1212

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.
1414

1515
**New with version 3.0:**
1616

1717
- Export code as a [Next.js](https://nextjs.org/) project
1818
- 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
2020
- Components and HTML canvas elements are rendered in the canvas in the same way they'll be rendered in the exported project
2121
- View dynamically generated Next.js or classic React code as you build your project
2222
- Authenticate with Github or email
@@ -33,18 +33,18 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
3333

3434
### How to use
3535

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.
3838
- **Next.js** projects allow you to easily create routing between pages within ReacType and render content with static rendering.
3939
- **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).
4141
- **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:
4242
- **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.
4848

4949
#### Contributors
5050

0 commit comments

Comments
 (0)