View Source Vibe

Pocket web inspector

A HTML/JS/CSSView Source & Page Inspector. I wanted to create an app like this for some time, since most View Source apps on mobile were annoying or old. It had to be:

free (open source)
open files and urls
options to share to and from the app
easy to use
syntax highlighting
wordwrap
line numbers
theme support
well tested on usability

iOS	Android

So I took the chance to experiment with Vibe coding (literally with Mistral Vibe). Vibe coding really suits me, because I mostly want the results of a good app, not the coding itself. I used Flutter because I know it already (we coded the Fiper.net app in it). I began with a simple View Source app, and gradually added more and more features, using Vibe and later also Gemini, Opus to help me with the implementation.

Coded myself the minumum possible
Kept the prompts broad, by purpose. To see how good it is. (It's good! in a lot of ways)
Logs/prompts in the repo
Tested a lot to make sure it really works well

Get it on the Play Store:
https://play.google.com/store/apps/details?id=info.wouter.sourceviewer

Or the App Store:
https://apps.apple.com/us/app/view-source-vibe/id6759335719

===

This is what Vibe wrote itself:

Cross-Platform Source Code Viewer & Page analyzer

View Source Vibe is a powerful tool to view source code, browse and inspect web pages, and analyze web technologies. Built with Flutter, it offers a desktop-class inspection experience on your mobile device.

✨ key features

📱 View Source & Inspect
- View HTML, CSS, JS, XML, and JSON with syntax highlighting.
- DOM Tree Inspector: Navigate the document structure like a pro.
- Reader Mode: Distraction-free reading for articles.
- RSS/Atom Feed Support: Auto-detects and displays feeds cleanly.
🔍 Deep Analysis
- Metadata: See all meta tags, social share previews (OpenGraph, Twitter Cards).
- Tech Stack Detection: Identifies CMS, frameworks, and libraries used on a page.
- Network Probe: Inspect HTTP headers, cookies, and security details.
- Asset Browser: List and view all images, scripts, and stylesheets linked in the page.
🛠️ Power Tools
- Browser Integration: "Surf & View Source" browser with tab support.
- Bundles: Save and organize your favorite sites and snippets.
- Share Action: Open any URL or text directly from other apps.

[!NOTE]
Disclaimer: The detection of services, tech stacks, and cookies is currently in beta and may not be 100% reliable yet.

🎯 Usage

Enter a URL or pick a local file to start.
Browse the web comfortably in the built-in browser.
Switch Tabs to inspect Source, DOM, Metadata, or Network details.
Share content from other apps to "View Source Vibe" for instant analysis.

🖥️ Desktop Releases

Tagged releases build desktop artifacts through GitHub Actions:

macOS: signed, notarized, and stapled DMG for distribution outside the Mac App Store.
Windows: installer built from the Flutter Windows release output.

To create a release build, push a version tag:

git tag v1.1.4
git push origin v1.1.4

The macOS notarization workflow requires these GitHub Actions secrets:

APPLE_CERTIFICATE_P12 - base64-encoded Developer ID Application .p12
APPLE_CERTIFICATE_PASSWORD - password for the .p12
APPLE_ID - Apple ID used for notarization
APPLE_PASSWORD - app-specific password for that Apple ID
APPLE_TEAM_ID - Apple Developer Team ID

🛠️ Building from Source

# Clone the repository
git clone https://github.com/woutervanwijk/viewsourcevibe.git
cd viewsourcevibe

# Install dependencies
flutter pub get

# Run the app
flutter run

📝 License

View Source Vibe - Your pocket web inspector. 🚀