The Ultimate Toolkit for Customizing Framer Exported Sites

Transform your Framer exports with AI-powered translations, live color previews, bulk editing, and more - all without touching a single line of code!

• Automatic Translation: Translate 150+ texts in 30 seconds with ChatGPT/Claude
• Smart JSON Export: Export all texts in JSON format for easy editing
• Bulk Processing: Customize 100+ pages in 5 minutes

• Live Color Preview: Change colors and see results instantly
• Logo & Favicon: Easily replace visual elements
• CSS Variables: Change entire color palette with one click
• Advanced Editor: Visual interface with real-time preview

• Bulk Export: Combine all pages into single JSON
• Consistent Translation: Same word translated the same everywhere
• Page Selector: View and edit any page
• Batch Processing: Process multiple HTML files at once

• SPA Fix: Maintain translations during page transitions
• Routing Killer: Disable Framer routing for normal HTML links
• Link Fixer: Automatically fix all internal links
• File Renamer: Rename files to match Framer routes

• Quick Start
• Tools Overview
• Use Cases
• Documentation
• Installation
• Contributing
• License

# Step 1: Export texts
Open: customize-advanced copy 2.html
Click: "📋 Export All Texts as JSON"
Download: all-texts-for-ai.json

# Step 2: Translate with AI
Open: ChatGPT or Claude
Prompt: "Translate all texts in this JSON to Turkish. Keep JSON format."
Paste: all-texts-for-ai.json content
Copy: AI response

# Step 3: Apply to site
Open: inject-customizations.html
Paste: AI response JSON
Select: page-original-framer.html
Click: "Process and Download"

# ✅ Done! 150+ texts translated in 3 minutes

# Step 1: Open editor
Open: customize-advanced copy 2.html

# Step 2: Edit
- Change texts in input fields
- Change colors with color picker (live preview!)
- Add favicon and logo URLs

# Step 3: Apply
Click: "Apply Changes" (see changes in preview)
Click: "Download JSON"

# Step 4: Inject
Open: inject-customizations.html
Upload: customizations.json
Select: your HTML file
Click: "Process and Download"

Advanced Visual Customization Editor

Features:

• ✅ Live preview with iframe
• ✅ Text editing with search
• ✅ Color picker with live preview
• ✅ Settings panel (title, meta, favicon, logo)
• ✅ Export all texts as JSON for AI
• ✅ Bulk export for multiple pages
• ✅ Page selector for multi-page sites
• ✅ Statistics dashboard

Use When:

• You want to see changes in real-time
• You need to customize colors visually
• You want to export texts for AI translation
• You have multiple pages to customize

Example:

// Automatically scans and finds:
- 150 unique texts
- 12 colors (CSS variables)
- All logos and images

// Export as JSON:
{
  "texts": {
    "LOVERA": "MYAGENCY",
    "Product design": "Web Design"
  },
  "colors": {
    "--token-9a91e853": "#0066ff"
  }
}

JSON to HTML Injector

Features:

• ✅ Validates JSON format
• ✅ Shows preview of changes
• ✅ Optimized script injection
• ✅ Supports texts, colors, favicon, logo
• ✅ Single file output (all code embedded)
• ✅ Performance optimized (Map-based search)

Use When:

• You have a JSON with customizations
• You want to apply changes to HTML
• You need a single file output
• You want to deploy to hosting

JSON Format:

{
  "texts": {
    "Old Text": "New Text"
  },
  "colors": {
    "--css-variable": "#newcolor"
  },
  "pageTitle": "My Site",
  "metaDescription": "Description",
  "favicon": "https://example.com/favicon.png",
  "logo": "https://example.com/logo.png"
}

Output:

• Single HTML file with embedded script
• Automatic text replacement on load
• DOM mutation observer for dynamic content
• Optimized for Framer's rendering

Bulk Script Injector

Features:

• ✅ Process multiple HTML files at once
• ✅ Adds Framer SPA fix script
• ✅ Progress bar
• ✅ Batch download
• ✅ Skips already processed files

Use When:

• You have 10+ HTML files
• You need SPA fix on all pages
• You want to save time

What It Does:

// Adds to each HTML file:
<script id="framer-spa-fix">
  // URL change detection
  // DOM mutation observer
  // Automatic text replacement
  // Color application
</script>

Framer Routing Disabler

Features:

• ✅ Removes all Framer routing scripts
• ✅ Converts SPA links to normal HTML links
• ✅ Cleans data-framer-* attributes
• ✅ Removes onClick events
• ✅ Batch processing

Use When:

• Framer routing causes issues
• You want normal HTML links
• Page transitions don't work
• You prefer full page reloads

Transformations:

<!-- Before -->
<a href="/about" data-framer-page-link="/about">About</a>
<script>__framer.router.navigate('/about')</script>

<!-- After -->
<a href="about.html">About</a>
<!-- Framer router script removed -->

File Renamer

Features:

• ✅ Renames files to match Framer routes
• ✅ Automatic name mapping
• ✅ Batch processing
• ✅ Shows before/after preview

Use When:

• Your file names don't match Framer routes
• You have ajans.html but Framer expects about.html
• You want SEO-friendly URLs

Mappings:

anasayfa.html → index.html
ajans.html → about.html
projeler.html → projects.html
haberler.html → blog.html

Framer SPA Fix Script

Features:

• ✅ URL change detection (every 500ms)
• ✅ DOM mutation observer
• ✅ Popstate event listener (back/forward buttons)
• ✅ Automatic retry (500ms, 1000ms, 2000ms)
• ✅ Performance optimized

Use When:

• Navbar links show English content
• Page transitions lose translations
• Back/forward buttons don't work
• You need persistent customizations

How It Works:

// 1. Detects URL changes
let lastUrl = location.href;
setInterval(() => {
  if (location.href !== lastUrl) {
    applyCustomizations(); // Re-apply
  }
}, 500);

// 2. Watches DOM changes
const observer = new MutationObserver(() => {
  if (majorChanges) {
    applyCustomizations();
  }
});

// 3. Handles back/forward
window.addEventListener('popstate', () => {
  applyCustomizations();
});

Scenario: You have an English Framer template with 150+ texts

Solution:

1. Open: customize-advanced copy 2.html
2. Click: "Export All Texts as JSON"
3. Send to ChatGPT: "Translate to Turkish"
4. Use: inject-customizations.html
5. Result: Fully translated site in 3 minutes

Time: 3 minutes
Manual: 3-4 hours
Savings: 95%

Scenario: Change orange theme (#ff531f) to blue (#0066ff)

Solution:

1. Open: customize-advanced copy 2.html
2. Go to: "Colors" tab
3. Click: Color picker for #ff531f
4. Select: #0066ff
5. See: Live preview changes instantly!
6. Click: "Download JSON"
7. Use: inject-customizations.html

Time: 2 minutes
Manual: 1-2 hours (finding all CSS)
Savings: 97%

Scenario: Multi-page site with 50 HTML files

Solution:

1. Open: customize-advanced copy 2.html
2. Click: "Bulk Export All Pages"
3. Select: All 50 HTML files (Ctrl+A)
4. System: Scans all pages, combines texts
5. Download: all-pages-texts-for-ai.json
6. Send to AI: "Translate all"
7. Use: inject-customizations.html on each page

Time: 10 minutes
Manual: 10-15 hours
Savings: 98%

Scenario: Navbar links show English content after click

Solution:

# Option 1: Add SPA Fix
1. Open: toplu-script-ekle.html
2. Select: All HTML files
3. Click: "Add Script to All Files"
4. Result: Translations persist on page change

# Option 2: Kill Routing
1. Open: framer-routing-killer.html
2. Select: All HTML files
3. Click: "Kill Framer Routing"
4. Result: Normal HTML links, full page reload

Time: 5 minutes
Manual: 5-10 hours (debugging)
Savings: 99%

Total for 50-page site:

• With Tools: 15 minutes
• Manual: 30-40 hours
• Savings: 99.4%

• HIZLI-BASLAT.md - 3-minute quick start (Turkish)
• EN-KOLAY-COZUM.md - Easiest solution (Turkish)
• SON-COZUM.md - Ultimate solution (Turkish)

• AI-ILE-CEVIRI-REHBERI.md - AI translation guide
• RENK-DEGISTIRME-REHBERI.md - Color customization
• COKLU-SAYFA-REHBERI.md - Multi-page guide

• FRAMER-SPA-FIX-REHBERI.md - SPA fix guide
• KULLANIM-REHBERI.md - Complete usage guide
• ORNEK-AI-PROMPT.md - AI prompt examples

# Download from GitHub
# Extract to your project folder
# Open any .html file in browser

git clone https://github.com/yourusername/framer-customization-toolkit.git
cd framer-customization-toolkit
# Open any .html file in browser

# No installation needed!
# All tools are standalone HTML files
# Just open in browser and use

• Browser: Chrome, Firefox, Safari, Edge (any modern browser)
• Framer Export: HTML files exported from Framer
• AI (Optional): ChatGPT, Claude, or any AI for translations
• No Server Required: All tools run in browser
• No Installation: Just open HTML files

Contributions are welcome! Here's how:

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

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

• Framer - For the amazing design tool
• OpenAI - For ChatGPT API
• Anthropic - For Claude AI
• Community - For feedback and contributions

If this project helped you, please give it a ⭐️!

• Visual drag-and-drop editor
• More AI integrations (Google Gemini, etc.)
• Figma plugin
• VS Code extension
• CLI tool
• WordPress plugin
• Shopify integration

Made with ❤️ for the Framer community

⭐ Star this repo if it helped you!