Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

AWS S3 Bucket Browser Sparkline


Single HTML file to browse AWS S3 buckets



  • Compatible Providers: GCP IBM DigitalOcean
  • List all files in a table view
  • Treat and display / in keys as folders
  • Render preview for Makrdown files
  • Show Install button for manifest.plist on iOS devices



  • Just download index.html and upload it to your bucket.
    • Adjust config within index.html if needed, e.g.
      const config = {
        title: 'Bucket Browser', // prefix value with `HTML> ` to render as html, see subtitle
        subtitle: 'HTML>made with ♥ by <b><a href="">qoomon</a></b>', // prefix value with `HTML> ` to render as html
        logo: '',
        favicon: '',
        primaryColor: '#167df0',
        bucketUrl: undefined,
        // If bucketUrl is undefined, this script tries to determine bucket Rest API URL from this file location itself.
        //   This will only work for locations like these
        //   *
        //   *
        //   *
        //   *
        //   *
        //   *
        // If bucketUrl is set manually, ensure this is the bucket Rest API URL, e.g.
        //   *
        //   *
        //   The URL should return an XML document with <ListBucketResult> as root element.
        rootPrefix: undefined, // e.g. 'subfolder/'
        keyExcludePatterns: [/^index\.html$/], // matches againt object key relative to rootPrefix
        pageSize: 50,
        bucketMaskUrl: undefined, 
        // If bucketMaskUrl is set file urls will be changed from ${bucketUrl}/${file} to ${bucketMaskUrl}/${file}
        //   bucketMaskUrl: ''
        //     => 
        //   bucketMaskUrl: document.location.origin
        //     => ${document.location.origin}/foo/bar.txt 
        defaultOrder: 'name-asc' // (name|size|dateModified)-(asc|desc)
  • ⚠️ Ensure Bucket Permissions
    • Go to<YOUR BUCKET NAME>/?tab=permissions
    • Grant public read permission by Access Control List or Bucket Policy
      • Access Control List
        • Enable List objects for Everyone
      • Bucket Policy
            "Version": "2012-10-17",
            "Statement": [
                    "Sid": "PublicRead",
                    "Principal": "*",
                    "Effect": "Allow",
                    "Action": [
                    "Resource": [
                        "arn:aws:s3:::<YOUR BUCKET NAME>",
                        "arn:aws:s3:::<YOUR BUCKET NAME>/*"
  • ⚠️ Ensure Bucket CORS
    • Depending on your setup you may need need to ensure following CORS Configuration
    • Go to<YOUR BUCKET NAME>/?tab=permissions
    • Grant Cross Origin Access by following CORS Configuration, replace by your address of bucket browser index.html
      • e.g
            "AllowedHeaders": [
            "AllowedMethods": [
            "AllowedOrigins": [
            "ExposeHeaders": [
            "MaxAgeSeconds": 3000
  • Open <YOUR BUCKET URL>/index.html in your browser.


CloudFront Setup

If you use CloudFront in upfront of your S3 bucket ensure following CloudFront settings.

  • Allowed/Cached HTTP Methods: GET, HEAD, OPTIONS
  • Cached Based on Selected Headers: Whitelist
    • Access-Control-Request-Headers
    • Access-Control-Request-Method
    • Origin
  • Query String Forwarding and Caching: Forward all

IBM Cloud Object Storage Setup

IBM Cloud Object storage only supports virtual host-style addressing, i.e. https://<bucket-name>s3-web.<region> for static website hosting. Otherwise follow the instructions in this tutorial to configure your bucket. In addition, you may need to configure CORS for your bucket.