A modern desktop browser application built with Tauri, React, and TypeScript, featuring embedded webviews and tab management.
Features • Quick Start • Development • Documentation • 中文文档
- 🌐 Embedded Web Views: Create and manage multiple webviews within a single application window
- 📑 Tab Management: Full-featured tab system with create, switch, and close operations
- 🎛️ Custom Window Controls: Native-feeling minimize, maximize, and close buttons
- 🔄 Dynamic Layout: Automatic webview resizing and repositioning based on window size
- ⚡ Fast & Lightweight: Built on Tauri for optimal performance and small bundle size
- 🎨 Modern UI: Clean, responsive interface with smooth animations
- 🖥️ Cross-Platform: Supports macOS, Windows, and Linux
- 🔧 Developer Friendly: Hot reload, TypeScript support, and comprehensive tooling
- Node.js: >= 18.0.0
- Rust: >= 1.70.0
- pnpm: >= 8.0.0 (recommended package manager)
-
Clone the repository
git clone https://github.com/your-username/sideview.git cd sideview -
Install dependencies
pnpm install
-
Start development server
pnpm tauri dev
This command will:
- Start the Vite development server
- Launch the Tauri application
- Enable hot reload for both frontend and backend
# Build the application
pnpm tauri build
# The built application will be available in:
# - macOS: src-tauri/target/release/bundle/macos/
# - Windows: src-tauri/target/release/bundle/msi/
# - Linux: src-tauri/target/release/bundle/deb/ or /appimage/| Component | Technology | Version |
|---|---|---|
| Frontend Framework | React | ^19.1.0 |
| Language | TypeScript | ~5.8.3 |
| Desktop Framework | Tauri | ^2.0.0 |
| Bundler | Vite | ^7.0.4 |
| Styling | Less | ^4.4.1 |
| Package Manager | pnpm | Latest |
sideview/
├── src/ # Frontend source code
│ ├── components/ # React components
│ │ ├── WindowTopBar.tsx # Custom window controls
│ │ └── WindowTopBar.less # Window controls styling
│ ├── App.tsx # Main application component
│ ├── App.less # Application styling
│ └── main.tsx # Application entry point
├── src-tauri/ # Rust backend
│ ├── src/
│ │ ├── main.rs # Application entry point
│ │ └── lib.rs # Tauri commands and logic
│ ├── capabilities/ # Permission configurations
│ │ └── default.json # Default permissions
│ ├── tauri.conf.json # Tauri configuration
│ └── Cargo.toml # Rust dependencies
├── public/ # Static assets
├── dist/ # Built frontend assets
└── package.json # Node.js dependencies and scripts
# Frontend development
pnpm dev # Start Vite dev server
pnpm build # Build frontend for production
pnpm preview # Preview production build
# Tauri development
pnpm tauri dev # Start Tauri development mode
pnpm tauri build # Build production application
# Rust backend (run in src-tauri/ directory)
cargo build # Build Rust backend
cargo test # Run Rust tests- Frontend Development: The Vite server runs on
http://localhost:1420with HMR enabled - Backend Development: Rust code changes trigger automatic recompilation
- Hot Reload: Both frontend and backend changes are reflected instantly
- Debugging: Use browser DevTools for frontend and Rust debugging tools for backend
- Custom window controls (minimize, maximize, close)
- Drag region for window movement
- macOS-style button design with hover effects
- Dynamic webview creation and positioning
- Tab state management with React hooks
- Physical coordinate calculations for precise layout
create_embedded_webview: Creates new webview instancesresize_webview: Adjusts webview size and positionshow_webview/hide_webview: Controls webview visibility
Click the "新建标签" (New Tab) button to create a new webview tab. By default, it opens Huaban.com, but this can be customized.
- Switch Tab: Click on any tab button to activate it
- Close Tab: Click the "×" button on each tab
- Window Controls: Use the traffic light buttons (close, minimize, maximize) in the top bar
- Minimize: Yellow button or programmatic minimize
- Maximize/Restore: Green button toggles between maximized and normal states
- Close: Red button closes the application
{
"app": {
"windows": [
{
"title": "sideview",
"width": 800,
"height": 600,
"decorations": false // Custom window decorations
}
]
}
}The application requires specific permissions for window and webview management:
- Window control permissions (minimize, maximize, close)
- Webview creation and management permissions
- File system access for local resources
1. Development server won't start
# Clear node modules and reinstall
rm -rf node_modules pnpm-lock.yaml
pnpm install2. Tauri build fails
# Update Rust toolchain
rustup update
# Clean Rust build cache
cd src-tauri && cargo clean3. Window controls not working
- Ensure all required permissions are set in
capabilities/default.json - Check that
decorations: falseis set intauri.conf.json
4. Transparent window warning on macOS
This warning can be safely ignored or resolved by enabling tauri.macOSPrivateApi in the configuration.
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Follow the existing code style and patterns
- Add TypeScript types for new features
- Test your changes thoroughly
- Update documentation as needed
- Follow conventional commit messages
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Tauri - For the amazing Rust-based desktop framework
- React - For the powerful UI library
- Vite - For the lightning-fast build tool
- TypeScript - For type safety and developer experience
If you have any questions or need help, please:
- Open an issue
- Check the documentation
- Join the Tauri Discord community
Made with ❤️ using Tauri and React