Skip to content

React + Electron boilerplate with Ant Design UI. A terminal interface that can interact with serial COM ports .. A settings panel for selecting baud rate, parity, and other serial options. Multiple tabs to handle multiple serial connections. Real-time serial data display with color-coded logs.

License

Notifications You must be signed in to change notification settings

quangvu10012001/electron-serial-terminal

Repository files navigation

React + Electron Terminal App

A modern and beautiful terminal application built with React, Electron, and Ant Design. This app allows interaction with serial COM ports, supports multiple tabs, and provides a sleek UI/UX inspired by professional terminal apps like Tabby Terminal.

Features πŸš€

  • Serial COM Port Interaction: Communicate with devices over serial ports using serialport.
  • Multiple Tabs: Open and manage multiple serial connections simultaneously.
  • Sidebar Navigation: A modern sidebar for seamless navigation.
  • Settings Panel: Configure baud rate, parity, stop bits, and other serial options.
  • Real-time Serial Data Display: Color-coded logs for better readability.
  • Light & Dark Theme: Toggle between themes for better user experience.
  • Smooth UI/UX: Inspired by modern terminal apps, ensuring a professional look and feel.

Tech Stack πŸ› οΈ

  • Electron: Desktop integration and native OS capabilities.
  • React + Vite: Fast UI rendering and modern development experience.
  • Ant Design: Professional and clean UI components.
  • xterm.js: Terminal interface for real-time serial communication.
  • serialport (Node.js): Serial communication handling.

Installation πŸ“₯

Prerequisites

Ensure you have the following installed on your system:

Steps

  1. Clone the repository:

    git clone https://github.com/yourusername/your-repo.git
    cd your-repo
  2. Install dependencies:

    yarn install
    # OR
    npm install
  3. Start the development environment:

    yarn dev
    # OR
    npm run dev
  4. Build the Electron app:

    yarn build
    # OR
    npm run build
  5. Package the app for distribution:

    yarn package
    # OR
    npm run package

Usage 🎯

  • Use the sidebar to navigate between different sections.
  • Open new terminal tabs to manage multiple serial connections.
  • Customize serial settings via the settings panel.
  • View real-time logs with color-coded output.

Screenshots πŸ–ΌοΈ

image

Contributing 🀝

Contributions are welcome! Feel free to fork the repository, create a new branch, and submit a pull request.

License πŸ“œ

MIT License. See LICENSE for more details.


Happy coding! πŸŽ‰

About

React + Electron boilerplate with Ant Design UI. A terminal interface that can interact with serial COM ports .. A settings panel for selecting baud rate, parity, and other serial options. Multiple tabs to handle multiple serial connections. Real-time serial data display with color-coded logs.

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published