LaTeXFlow

A modern, open-source LaTeX editor with real-time preview

LaTeXFlow is a modern, web-based LaTeX editor designed to provide a seamless writing experience with real-time preview, syntax highlighting, and a comprehensive template library.

Features

• Real-time Preview: See your LaTeX document rendered as you type
• Monaco Editor: Powered by the same editor as VS Code
• Syntax Highlighting: Beautiful LaTeX syntax highlighting with custom theme
• Auto-completion: Intelligent auto-completion for LaTeX commands
• Template Library: Pre-built templates for articles, papers, presentations, and more
• Split View: Adjustable split-pane interface with resizable panels
• Modern UI: Clean, dark-themed interface built with Tailwind CSS
• Responsive: Works on desktop and tablet devices

Screenshots

(Add screenshots here after running the application)

Tech Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite 5
• Code Editor: Monaco Editor (VS Code's editor)
• LaTeX Compiler: latex.js (JavaScript-based LaTeX compiler)
• Styling: Tailwind CSS
• UI Components: Lucide React icons, react-resizable-panels

Getting Started

Prerequisites

• Node.js 18+ and npm (or yarn/pnpm)

Installation

1. Clone the repository:

git clone https://github.com/marcosfpina/dnsec.git
cd dnsec

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:3000

Building for Production

npm run build

The built files will be in the dist directory.

Preview Production Build

npm run preview

Usage

Basic Workflow

1. Choose a Template: Click the "Templates" button to select from pre-built templates
2. Write LaTeX: Edit your document in the left pane with syntax highlighting and auto-completion
3. Preview: See your document rendered in real-time in the right pane
4. Toggle Preview: Hide the preview pane for more editing space
5. Export: Export your document to PDF (coming soon)

Keyboard Shortcuts

• Ctrl/Cmd + S: Save (browser download)
• Ctrl/Cmd + /: Toggle comment
• Ctrl/Cmd + Space: Trigger auto-completion

Available Templates

• Articles

  • Basic Article
  • Academic Paper with Abstract

• Education

  • Math Homework

• Presentations

  • Beamer Presentation

• Documents

  • Formal Letter
  • CV/Resume

• Reports

  • Technical Report

Project Structure

latexflow/
├── src/
│   ├── components/        # React components
│   │   ├── Editor.tsx     # Monaco editor wrapper
│   │   ├── Header.tsx     # Top navigation bar
│   │   ├── Preview.tsx    # LaTeX preview pane
│   │   └── TemplateSelector.tsx  # Template selection modal
│   ├── templates/         # LaTeX templates
│   │   └── templates.ts   # Template definitions
│   ├── App.tsx           # Main application component
│   ├── main.tsx          # Application entry point
│   └── index.css         # Global styles
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── tailwind.config.js

Development

Code Style

This project uses:

• TypeScript for type safety
• ESLint for code linting
• Prettier for code formatting (recommended)

Run linter:

npm run lint

Adding New Templates

To add a new template, edit src/templates/templates.ts:

{
  id: 'my-template',
  name: 'My Template',
  description: 'Description of the template',
  category: 'Category',
  code: `\\documentclass{article}
...
\\end{document}
`,
}

Roadmap

• PDF Export functionality
• Multiple file/project support
• Cloud storage integration
• Collaborative editing
• Custom themes
• More LaTeX packages support
• BibTeX management
• Spell checking
• Git integration

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Monaco Editor - The code editor
• latex.js - JavaScript LaTeX to HTML5 translator
• Tailwind CSS - Utility-first CSS framework
• Lucide - Beautiful icon set
• Vite - Next generation frontend tooling

Support

If you encounter any issues or have questions:

• Open an issue on GitHub Issues
• Check the LaTeX documentation

Authors

• LaTeXFlow Contributors

---

Made with ❤️ using React and TypeScript