This guide outlines the exact 5-step process with before-and-after code diffs, ensuring a painless, risk-free removal and a flawless production build.
📖 Introduction
Need an exact, step-by-step tutorial with code diffs showing precisely which files to modify to remove the 'Made with Lovable' badge? This walkthrough provides concrete code examples for index.html and React layout components, followed by production verification instructions.
The Problem with Walled Gardens
Vague tutorials often say 'just remove the badge code' without showing which specific files contain the injection points, leaving developers unsure of what to delete and risking broken build outputs.
The Push44 Solution
This guide outlines the exact 5-step process with before-and-after code diffs, ensuring a painless, risk-free removal and a flawless production build.
Step-by-Step Walkthrough
5 stepsStep 1: Export your project using Push44
Open Push44 (/push), select Lovable, enter your project details, and export the codebase to GitHub or download as a ZIP file.
Step 2: Clean index.html
Open index.html and look for any script tags loading external Lovable widgets. Delete them: <!-- DELETE THIS --> <script src='https://cdn.lovable.dev/badge.js'></script>
Ensure your main React script tag (<script type='module' src='/src/main.tsx'></script>) remains untouched.
Step 3: Clean src/App.tsx & root layouts
Open src/App.tsx or your main layout file. Remove any imported badge components: // DELETE IMPORT import { LovableBadge } from '@/components/LovableBadge'; // DELETE JSX TAG <LovableBadge />
Step 4: Run local build check
In your terminal, run 'npm install' followed by 'npm run build'. Verify that the build completes with zero errors.
If you see any unresolved import errors, search your components directory for leftover references.
Step 5: Deploy to production
Push your changes to GitHub and let Vercel or Netlify deploy your clean, watermark-free web app.
Pro Recommendations
Use Git branches (e.g. 'clean-branding') to test your changes before merging into 'main'.
Check your browser's Inspect Element tool on the deployed site to confirm the badge DOM element is 100% gone.
Add custom metadata and social share cards in index.html to make your app look polished.
Keep Push44 handy for future project exports.
Common Pitfalls to Avoid
Deleting required CSS reset stylesheets along with watermark styles.
Leaving orphan import statements in React components that cause TypeScript build failures.
Forgetting to push changes to GitHub after editing locally.
Frequently Asked Questions
What happens if I make a mistake and delete the wrong line?
Because your project is in Git, you can always revert unwanted changes with 'git checkout' or view your previous commit history.
Does this step-by-step tutorial work on Windows, Mac, and Linux?
Yes. The code structure is identical regardless of your operating system.
Can I use this on mobile devices?
Yes, you can edit files directly in GitHub's mobile web editor or use Push44's Android APK.
How do I know if my build succeeded?
When 'npm run build' generates a 'dist' folder without errors, your application is ready for production.
Export and push your code in seconds.
Connect your platform, preview the visual diff, and create atomic commits on GitHub with zero server data retention.