TSX View/Edit is a minimalist, cross-platform desktop application for viewing and interactively previewing .tsx files. It positions the TSX file as a new, self-contained format for interactive content, similar to what Flash animations once were.

With the rise of AI services like Anthropic's Claude, which can generate UI components as downloadable TSX "artifacts," this tool empowers not just developers, but also regular users to open, view, and interact with these new forms of content without needing a full development environment.

• Live Preview: Instantly see the rendered output of your TSX code.
• Code Editor: Make changes to the code and see the results immediately.
• Dependency Support: The application uses a CodeSandbox environment to automatically handle npm dependencies specified in your code.
• Resizable Panels: Adjust the size of the editor and preview panels for a comfortable workflow.
• Cross-Platform: Works on Linux and Windows.
• Internationalization: Supports English and Russian languages.

• Runtime: Electron
• UI Framework: React
• Language: TypeScript
• Bundler: Vite
• Sandbox: @codesandbox/sandpack-react

1. Clone the repository:

   git clone https://github.com/01esyaLebedeva/tsx_viewer.git
   cd tsx_viewer

2. Install dependencies:

   npm install

3. Run in development mode:

   npm run dev

4. Build the application:

   npm run build

   The bundled files will appear in the dist-electron directory.

If you are working on Windows and do not intend to create packages for Linux (snap, AppImage, etc.), you can temporarily disable the Linux build to speed up the npm run build process.

To do this, find the build section in the package.json file and rename the linux key to _linux:

"build": {
  ...
  "_linux": { // <-- Key renamed
    "desktop": "src/tsx_viewer.desktop",
    "category": "Utility;Development;Viewer;",
    "icon": "src/icons/tsx_viewer.png",
    "target": [
      "snap",
      "AppImage",
      "deb",
      "pacman"
    ]
  },
  ...
}

To re-enable the Linux build, simply rename the key back to linux.

• Download .AppImage
• Download .pacman
• Download .deb
• Download .snap

• Implement file saving.
• Improve error handling and display.
• Add support for multiple file tabs.
• Add a file tree sidebar for easy navigation.

This project is configured for effective collaboration with AI assistants like Gemini. To facilitate a deep understanding of the project's structure, it uses a project_graph system.

What is the Project Graph? The project_graph system, defined in the project_graph/ directory, is a structured description of the project, including:

• Key files and components.
• Their purpose and dependencies.
• Interaction channels (e.g., IPC messages in Electron).
• Rules for automated commit categorization.

Why is it needed? This system allows the AI assistant to quickly build a "mental map" of the project, leading to more accurate and context-aware coding, refactoring, and analysis. It also enables automated workflows for maintaining code quality and consistency.

How to work with it?

1. Keep it updated: When adding new key components or changing interaction logic, please update project_graph/project_graph.jsonnet.
2. Use Jsonnet: You may need Jsonnet to work with the files within the project_graph/ directory.
3. Audit the Graph: To ensure the graph is in sync with the actual project files, run the audit script:

   npm run graph:audit

4. Automate Commits: To create clean, atomic commits based on the graph's rules. Ensure your changes are staged (git add .) before running this command:

   npm run graph:commit

5. Synchronize AI Commands: To update the rule files for various AI assistants with the latest command definitions:

   npm run sync:ai-commands

For details on how to configure your AI assistant to use these commands, refer to the AI Assistant Command Mapping section in project_graph/README.md.

This project is licensed under the GPL-3.0 license