Tsed-s-React Dev Kit

Overview

When developing with React it can sometimes be cumbersome to switch between your code and the browser to see your component changes. This extension solves that problem by providing a live component preview directly within your editor.

The side panel also provides quick access to common commands and documentation, saving you time and keeping you in the flow.

Key Features

• Live Component Preview: See your React components update in real-time as you code.
• Side Panel: Quick access to common commands, documentation, and project information.
• Seamless Integration: Works with your existing React projects.

Live Component Preview

The live component previewer will automatically detect the active development server and render it in a separate view. This allows you to see your changes instantly without having to manually refresh your browser.

Side Panel

The side panel provides a convenient way to access common actions and information.

Opening Documentation In the editor

Easily access React documentation directly within your editor without needing to switch contexts.

Getting Started

1. Install the extension from the VS Code Marketplace.
2. Open a React project.
3. Open a React component file (.js, .jsx, .ts, or .tsx).
4. Open the command palette (Ctrl+Shift+P or Cmd+Shift+P) and run the command Tsed-s-React: Show Component Preview.
5. The component preview will open in a new tab.

Extension Settings

This extension does not yet have any configurable settings.

Contributing

Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue on the GitHub repository.

License

This project is licensed under the MIT License.