🇪🇸 Leer en Español

A modern and private application for creating, organizing and exporting CTF write-ups with AI assistance

Designed by and for the cybersecurity community, CTF Write-up Builder allows you to document your CTFs professionally with Markdown support, automatic screenshots, AI content generation, and multiple export formats.

🚀 Try the application here

No registration, no tracking, no limits. Your privacy is our priority.

Main View	AI Editor	Export

• Google Gemini and OpenAI ChatGPT integrated
• Generate specific content for each section
• Automated vulnerability analysis
• Contextual tool suggestions

• Native Markdown with real-time preview
• Integrated screenshots per section
• Predefined templates for different CTF types
• Customizable tags for organization

• Professional PDF with optimized formatting
• Standard Markdown for GitHub/GitLab
• JSON for backup and collaboration

• Complete Spanish and English
• Adaptive interface by region
• Localized AI prompts

• 100% local - No external servers
• Encrypted API keys stored locally
• Open source - Fully audited
• No tracking or telemetry

• Responsive design - Works on mobile and desktop
• Professional hacker theme
• Auto-save to prevent data loss

• Node.js 18.0 or higher
• npm or yarn

# Clone the repository
git clone https://github.com/ilanami/ctf_writeup_builder.git

# Navigate to directory
cd ctf_writeup_builder

# Install dependencies
npm install

# Run in development mode
npm run dev

The application will be available at http://localhost:3000

# Create optimized build
npm run build

# Run in production
npm start

For a quick and isolated start, you can run the application using the official Docker image available on Docker Hub.

• Docker Desktop installed and running.

1. Pull the image from Docker Hub:

   docker pull ilanamin/ctf-writeup-builder:1.0

2. Run the container:

   docker run -d -p 3000:3000 --name ctf-app ilanamin/ctf-writeup-builder:1.0

3. Open the application: Navigate to http://localhost:3000 in your web browser.

• Stop the container:

  docker stop ctf-app

• Start the container again:

  docker start ctf-app

• View logs:

  docker logs ctf-app

• Remove the container:

  docker rm ctf-app

• Click "API Key" in the top bar
• Choose between Google Gemini or OpenAI
• Enter your personal API key
• 📖 How to get API Keys

• Click "New" to start
• Fill in basic information (title, difficulty, etc.)
• Add sections according to your methodology

• In each section, click "Generate with AI"
• Briefly describe what you found
• AI will generate professional content

• Use "Add Screenshot" in each section
• Drag and drop images
• Screenshots are automatically included in exports

• PDF for professional reports
• Markdown for documentation
• JSON for backup/collaboration

1. Go to Google AI Studio
2. Create a new API Key
3. Copy it to the app configuration

1. Go to OpenAI Platform
2. Create a new API Key (starts with sk-)
3. Copy it to the app configuration

🔒 Security: Your API keys are stored encoded locally. They are never sent to external servers except to AI providers for content generation.

• Frontend: Next.js 15, React 18, TypeScript
• Styling: Tailwind CSS, CSS Modules
• State: React Context + useReducer
• AI: Google Gemini & OpenAI APIs
• Security: DOMPurify, Input sanitization
• Performance: React.memo, useCallback optimizations

src/
├── app/                 # Next.js App Router
├── components/          # Reusable React components
├── contexts/           # Global state (Context API)
├── utils/              # Utilities and helpers
├── ai/                 # AI API integrations
└── types/              # TypeScript definitions

This application has been fully audited for security:

• ✅ XSS Prevention - DOMPurify on all dynamic HTML
• ✅ Input Sanitization - Validation on all inputs
• ✅ API Security - Keys encoded locally
• ✅ Dependency Audit - No known vulnerabilities
• ✅ OWASP Compliance - Best practices implemented

See SECURITY.md for complete details.

Supported languages:

• 🇪🇸 Español (Spain/Latin America)
• 🇺🇸 English (US/International)

Want to add your language? Contribute here

• Complete lazy loading
• Virtual scrolling for large lists
• Bundle size optimization

• More CTF templates
• Keyboard shortcuts
• Drag & drop to reorganize sections

• Export to more formats (DOCX, HTML)
• Git integration
• Basic collaborative mode

• Plugin system
• Custom AI prompts
• CTF platform integrations

Contributions are welcome! This application is made by and for the CTF community.

• 🐛 Report bugs in Issues
• 💡 Suggest features
• 🌍 Translate to new languages
• 🔧 Submit Pull Requests
• ⭐ Star the project

# Fork the repository
# Clone your fork
git clone https://github.com/YOUR-USERNAME/ctf_writeup_builder.git

# Create branch for your feature
git checkout -b feature/new-functionality

# Make changes and commit
git commit -m "feat: add new functionality"

# Push and create Pull Request
git push origin feature/new-functionality

If you've enjoyed my projects and tools and found them useful, consider buying me a coffee or making a donation as a thank you.

It's not mandatory, but it would help me tremendously to continue creating tools like this and to pay for the cybersecurity certifications I want to obtain.

Thank you very much for your support!

• GitHub Issues: Create new issue
• Email: writeup_builder@proton.me

For general inquiries, collaborations or proposals: writeup_builder@proton.me

This project is under the MIT license. See LICENSE for details.

To ensure all features work correctly in development mode, the Content Security Policy (CSP) allows 'unsafe-eval' only in development. This is required by some dependencies for local development.

In production (e.g., on Vercel), the CSP configuration does not include 'unsafe-eval', so the application is secure and compliant with platform security standards.

Do not modify the CSP to allow 'unsafe-eval' in production. The current configuration manages this automatically depending on the environment.

1. Open the next.config.mjs file at the root of the project.
2. Make sure the CSP line looks like this:

   {
     key: 'Content-Security-Policy',
     value: process.env.NODE_ENV === 'development'
       ? "default-src 'self'; img-src 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self';"
       : "default-src 'self'; img-src 'self' data: https:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self';"
   },

3. Save the file and restart the development server:

   npm run dev

4. Reload the page in your browser with Ctrl + F5.

In production, 'unsafe-eval' is NOT allowed and the app is secure.

Thanks to all CTF players, open source contributors and the cybersecurity community that made this project possible.

• Next.js - React Framework
• Tailwind CSS - Styling
• Google Gemini - AI for generation
• OpenAI - Alternative AI
• DOMPurify - XSS Sanitization