A comprehensive directory for discovering and browsing Flow Actions from the FlowActions repository
Flow Actions Marketplace is a modern web application that provides an automatically updated directory of Flow Actions—composable DeFi primitives for building sophisticated financial workflows on the Flow network.
The marketplace dynamically fetches the latest actions from the FlowActions GitHub repository, extracts meaningful metadata from Cadence smart contracts, and presents them in an intuitive, filterable interface. Each action is displayed with human-friendly titles, descriptions, action types, and tags, making it easy for developers to discover and explore available DeFi connectors.
Built with modern web technologies and designed to match Flow.com's visual identity, the marketplace serves as a central hub for the Flow Actions ecosystem.
The marketplace automatically fetches the latest Flow Actions from GitHub on each page load, ensuring users always see the most up-to-date information without manual updates.
For each action, the marketplace extracts:
- Human-friendly titles from file names with acronym preservation
- Descriptions from Cadence documentation comments
- Action types (Source, Sink, Swapper, PriceOracle, Flasher)
- Categories and tags for filtering and organization
Interactive tag-based filtering allows users to quickly find actions by:
- Action type (Source, Sink, Swapper, etc.)
- Protocol integration (EVM, ERC4626, IncrementFi, etc.)
- Category classification
- Flow.com Design Language: Matches Flow official branding and visual identity
- Responsive Design: Works seamlessly on desktop and mobile devices
- Fast Performance: Optimized for quick loading and smooth interactions
- Accessible: Built with accessibility best practices
- A modern web browser with JavaScript enabled
- A local web server (for local development)
-
Clone or download this repository
git clone <repository-url> cd flow-actions-website
-
Serve the files using a local web server
Since the site uses JavaScript to fetch from GitHub's API, you'll need to serve it through a web server to avoid CORS issues.
Option 1: Using Python
python3 -m http.server 8000
Then open
http://localhost:8000in your browser.Option 2: Using Node.js (http-server)
npx http-server -p 8000
Then open
http://localhost:8000in your browser.Option 3: Using PHP
php -S localhost:8000
Then open
http://localhost:8000in your browser.
The marketplace can be deployed to any static hosting service:
- Netlify: Drag and drop the folder or connect to a Git repository
- Vercel: Deploy via CLI or connect to Git repository
- GitHub Pages: Push to a repository and enable GitHub Pages
- Cloudflare Pages: Connect to Git repository
- Any static hosting: Upload the files to your hosting provider
- Create a new site on Netlify
- Drag and drop the project folder, or
- Connect your Git repository and set:
- Build command:
echo "No build needed" - Publish directory:
/
- Build command:
On each page load, the application:
- Fetches connector files from the FlowActions GitHub repository using the GitHub REST API
- Recursively scans the
cadence/contracts/connectorsdirectory structure - Retrieves file contents for metadata extraction
For each connector file, the system:
- Parses Cadence files to extract documentation comments
- Identifies struct definitions and their associated documentation
- Detects action types from struct names (Source, Sink, Swapper, etc.)
- Extracts tags from file content and metadata
- Generates human-friendly titles with proper acronym handling (EVM, FLOW, ERC4626, etc.)
Actions are presented in a responsive grid with:
- Action cards showing title, description, type, and tags
- Filter buttons for each unique tag
- Dynamic filtering that shows/hides cards based on selected tags
- Results counter that updates based on active filters
- Direct links to view actions on GitHub
flow-actions-website/
├── index.html # Main HTML structure
├── styles.css # Styling and layout (Flow.com design system)
├── app.js # JavaScript for fetching, parsing, and displaying actions
├── flow-icon.svg # Flow brand icon
└── README.md # This file
Edit the CSS variables in styles.css:
:root {
--primary-color: #00ef8b; /* Flow green */
--primary-dark: #02d87e; /* Flow green dark */
--background: #000000; /* Black background */
--text-primary: #ffffff; /* White text */
/* ... */
}Edit the renderActions() function in app.js to change how actions are displayed in the grid.
Extend the extractMetadata() function in app.js to extract additional information from Cadence files or add new tag detection logic.
Modify the renderFilters() and initializeFilters() functions in app.js to add custom filtering logic beyond tag-based filtering.
- Modern browsers: Chrome, Firefox, Safari, Edge (latest versions)
- JavaScript: Required for all functionality
- Responsive design: Works on mobile and desktop devices
- SVG support: Required for logo and favicon display
The marketplace uses the GitHub REST API to fetch repository contents. No authentication is required for public repositories, but be mindful of GitHub's rate limits (60 requests per hour for unauthenticated requests).
- Actions are fetched in batches to avoid overwhelming the GitHub API
- Metadata extraction includes error handling for graceful degradation
- Filtering is performed client-side for instant results
Contributions are welcome! Areas for improvement include:
- Enhanced metadata extraction from Cadence files
- Additional filtering options
- Performance optimizations
- Accessibility improvements
- UI/UX enhancements
Please feel free to submit issues or pull requests to improve the marketplace.
This project is open source and available for use.
- FlowActions Repository: https://github.com/onflow/FlowActions
- Flow Documentation: https://developers.flow.com
- Flow.com: https://flow.com
This repo is part of the Flow network, a Layer 1 blockchain built for consumer applications, AI agents, and DeFi at scale.
- Developer docs: https://developers.flow.com
- Cadence language: https://cadence-lang.org
- Community: Flow Discord · Flow Forum
- Governance: Flow Improvement Proposals