Yoga Pose Visualizer

Where every pose finds its picture

Comment

Inspiration

As a yoga practitioner, I often found myself spending too much time searching for the right pose images. It consumes a lot of time and interrupts my schedule, which slows down my productivity. This inspired me to build a simple tool that brings pose images directly into Adobe Express instantly and at ease.

What it does

Yoga Pose Visualizer is an Adobe Express Add-on that lets users instantly generate high-quality yoga pose images simply by typing the name of a pose. No matter which language the pose is named in, either in Sanskrit or in English or both, the add-on fetches accurate and relevant images using the Pexels API and displays them right inside the editor.

How we built it

The Add-on was built using: HTML & CSS: For a clean, minimal UI JavaScript: To handle logic and API integration Pexels API: For fetching real-time pose images

The project is developed inside the Adobe Express Add-on Code Playground, requiring no server or backend, making it lightweight, secure for demo use, and instantly deployable.

Challenges we ran into

  1. Ensuring the image results are accurate across different spells (E.g., “Paschimottanasana” vs “Seated Forward Bend”)
  2. Had to find a simple way to make UI work smoothly with just HTML, CSS, and JavaScript since everything had to run inside Adobe Express without a backend.
  3. While experiencing the search terms to get better matches, I experienced inaccurate image results from the API call.

Accomplishments that we're proud of

  1. Successfully integrated a live image search API into Adobe Express
  2. Designed a functional, elegant UI with instant feedback
  3. Made pose visualizations language-agnostic
  4. Delivered a fully working prototype - fast, secure, and ready for real user testing

What we learned

  1. How to build, test, and ship an add-on entirely within Adobe Express's Code Playground
  2. The value of simplifying user workflows in design tools
  3. The importance of thoughtful UI when building tools for creators and instructors
  4. How to work with third-party APIs in a secure, client-only environment

What's next for Yoga Pose Visualizer

  1. Add an "Insert into Canvas" button, enabling users to drag pose images directly into their design projects
  2. Introduce smart pose filters like "Beginner", "Advanced", and "Stretch" to refine image results
  3. Improve API Security - using Adobe's secure API method or a lightweight proxy server for production deployment

Built With

Share this project:

Updates