Introducing PAPI Interactive Console / Playground

Ecosystem Digest
1

Greetings, Polkadot Community!

Today, I’m thrilled to unveil a project that’s been brewing in our workshop: the PAPI Interactive Console — a comprehensive development environment designed to revolutionize how web developers approach building on Polkadot.

What Is PAPI Interactive Console?

The PAPI Interactive Console is a sophisticated tool that enables developers to craft, evaluate, and deploy React components that seamlessly interact with Polkadot and its parachains in real-time. We’ve built upon our existing foundation (already live at papi-simulator.aipop.fun) to transform what began as a learning resource into a powerful development environment.

Imagine writing a React component and instantly seeing how it interacts with blockchain state — no complex setup, no waiting for transactions to propagate through test environments, just immediate feedback in a familiar development paradigm.

Why We Built This

As blockchain developers ourselves, we’ve experienced the steep learning curve that comes with transitioning from traditional web development to blockchain. Even experienced React developers face significant barriers when beginning to build on Polkadot:

  • Setting up a local development environment is complex
  • Understanding blockchain state management differs from standard web practices
  • Testing interactions requires multiple tools and considerable waiting time
  • Learning curve for parachain-specific nuances is substantial

Our solution: bring the blockchain to the developer in a format they already understand.

Current Capabilities

The current implementation at papi-simulator.aipop.fun already offers:

  • Network Selection: Easily switch between Polkadot testnets
  • Code Editor: Write and execute code with syntax highlighting
  • Console Output: Visualize results directly in the browser
  • Example Selector: Browse categorized examples to learn from
  • Network Information: View real-time chain stats and details

Here’s what the interface looks like today:

Screenshot 2025-04-07 at 22.10.32
Screenshot 2025-04-07 at 22.10.321920×1183 103 KB

Our Roadmap

We’re now embarking on a significant expansion of the platform. Our comprehensive roadmap includes:

  1. Enhanced Code Editor: TypeScript-specific features for Polkadot API development, including autocompletion and inline type checking
  2. React Component Preview: Real-time rendering of components as they’re being edited
  3. State Management System: Connecting React components to blockchain data with specialized hooks
  4. Polkadot API Integration: Core layers for interacting with multiple networks simultaneously
  5. Parachain Support Framework: Extensible architecture for parachain-specific functionality
  6. Transaction Builder UI: Visual tools for transaction creation and submission
  7. Component Templates: Pre-built solutions for common blockchain interactions
  8. Export System: Functionality to export components for production use

How This Benefits the Ecosystem

The PAPI Interactive Console addresses a critical gap in the Polkadot developer experience:

  • Lowers Barriers to Entry: Web developers can leverage their existing knowledge
  • Accelerates Development: Instantly test and iterate on blockchain interactions
  • Enhances Education: Learn by doing with immediate feedback
  • Fosters Experimentation: Try novel approaches without costly setup time
  • Simplifies Parachain Onboarding: Templates for parachain-specific interactions

We believe this tool will significantly expand the Polkadot developer ecosystem by making blockchain development accessible to the millions of React developers worldwide.

:megaphone: Fast-Grants Proposal

We’re excited to announce that we’ve submitted a proposal to the Polkadot Fast-Grants Programme to accelerate the development of these enhancements. Our proposal outlines a 50-day development schedule with clear milestones and deliverables.

You can find our proposal here: PAPI Interactive Console Proposal

:handshake: Community Involvement

We invite the community to:

  1. Try the current version: Visit papi-simulator.aipop.fun and experiment with the interface
  2. Provide feedback: What features would you find most valuable?
  3. Share use cases: How would you leverage this tool in your development workflow?
  4. Support our proposal: If you see value in this project, your voice in the community matters

:open_mailbox_with_raised_flag: Connect With Us

We’re passionate about making Polkadot development more accessible and efficient. The PAPI Interactive Console represents our commitment to reducing friction for developers and accelerating the growth of the Polkadot ecosystem.

Looking forward to your thoughts and feedback!

Fred (codingsh) aipop.fun Team

11 Likes
2

Something not cool with the light theme:

image
image3122×1318 436 KB

  • Tutorial text is not visible
  • Selected network is not visible
  • Theme switcher is not working
2 Likes
3

Zrzut ekranu 2025-04-14 o 12.00.48
Zrzut ekranu 2025-04-14 o 12.00.483110×1292 435 KB

Run button is not visible as well

2 Likes
4

Thanks to light theme QA, I will open issues in the repository and make the changes this week!

5

@evgeny-s, thank you for your feedback! The issue has been fixed, and the updated version is now available at GitHub - developerfred/papi-simulator: Polkadot-Api - Learning Tool.

you can try on: https://papi-simulator.aipop.fun

6

I confirm that it works as expected now, thanks!

1 Like
7

Hi!
Looks good, but it doesn’t really interacts with the PAPI yet, does it? I’ve deleted half of the code and it still returns the same output with block numbers that are slightly random.

9

We still don’t have direct interaction with the PAPI, the important thing here is for developers to have an easy interface to learn how to build with the PAPI, in my second milestone the components in react with real interaction with the PAPI will be available, many good things are coming :slight_smile:

1 Like
10

I’d say that a must have for this to be truly useful for the ecosystem is to have the ability to connect to custom chains/parachains not just the relay chains (locally or remote).

11

It looks promising as a proof-of-concept, but… I’m confused

According to the project link you shared, the first milestone includes most of the core functionality. However, although you indicate that the first milestone has been completed, the current state feels more like a basic mock-up rather than a feature-complete implementation. Taking a look at the goals of the first milestone:

  1. Code Editor: Upgrade the Monaco editor with TypeScript-specific features for Polkadot API development, including autocompletion for polkadot-api functions, inline type checking, and parameter hints.

It has a few PAPI functions, but it gets completely lost on anything else. For instance, it’s not able to show parameter hints or type-checking for any interaction with the typedApi beyond “typedApi.query”.

  1. React Component Preview Panel: Implement the component rendering environment that displays real-time previews of React components as they are being edited, with proper error boundaries and state preservation.

This feature was difficult to discover, to open it is by clicking on the “Typescript” button above the code editor. But unfortunately, it doesn’t work, when activated it breaks with an error making it unusable.

Goals 3-5 is regarding state management, connection to a chain and its parachains.

The current implementation gives the impression that the code editor is still in a mocked-up state. Modifying the code and pressing run doesn’t really change anything about the result or what’s shown in the console. Or using the default example for “query account balance” on polkadot shows as if ALICE has 1223 DOT, which isn’t the actual value of ALICE.

And lastly, the UI is full of features that are half-implemented or non-functional. I would suggest focusing on completing and stabilizing individual components before moving to the next feature.

The concept is nice, but in its current state (version 1.0.0…) is not really usable as a sandbox. I’m looking forward to seeing this project come into live, but I’m worried it will get abandoned or not completed to its full potential if the current state represents “milestone 1”.

2 Likes
12

Thank you for your comprehensive feedback, byteme. I appreciate the time you’ve taken to thoroughly evaluate the current state of the project and provide such detailed observations.

Many of the issues and feature requests you’ve outlined are indeed already incorporated into the PAPI simulator’s development roadmap, and I’m actively working toward completing the second milestone delivery. Your feedback validates several areas I’ve identified for improvement and helps prioritize the most critical functionality gaps.
I particularly value your systematic approach to evaluating each milestone component—this type of structured assessment is exactly what’s needed to ensure we’re delivering meaningful value to the developer community.

Please continue providing this caliber of feedback as development progresses. This kind of thorough evaluation not only helps refine this specific project but also contributes to raising the overall quality standards across the ecosystem. The Polkadot development community benefits significantly when projects receive this level of constructive scrutiny.

I’m committed to addressing these concerns systematically and look forward to your assessment of the forthcoming updates.

13

Community Templates on Papi Simulator

14

PAPI Console: Streamlining Polkadot Development – OpenGov & Beyond!

Hey Polkadot Community,

I’m thrilled to share a major update on the PAPI Interactive Console. Our mission has always been clear: to revolutionize how web developers build on Polkadot, making it intuitive and efficient. This post documents our journey, addresses your valuable feedback, and highlights our latest advancements.

What is PAPI Interactive Console?

The PAPI Interactive Console is a powerful development environment. It empowers developers to create, test, and deploy React components that seamlessly interact with Polkadot and its parachains in real-time. We’ve evolved our platform (live at papi-simulator.aipop.fun) from a learning tool into a full-fledged development hub.

Imagine writing a React component and instantly seeing its blockchain interaction – no complex setup, no waiting. Just immediate feedback in a familiar development paradigm.

Why We Built This

As blockchain developers, we faced the steep learning curve from traditional web development. Even experienced React developers hit major roadblocks with Polkadot:

  • Complex Local Setup: Getting started is often a headache.
  • Blockchain State Management: Different from standard web practices.
  • Time-Consuming Testing: Requires multiple tools and significant waiting.
  • Parachain Nuances: A substantial learning curve for specific chain intricacies.

Our solution? Bring the blockchain to the developer in a format they already understand.

Current Capabilities & Recent Innovations

Our live implementation at papi-simulator.aipop.fun now features:

  • Network Selection: Easily switch between Polkadot testnets.
  • Code Editor: Write and execute code with syntax highlighting.
  • Console Output: Visualize results directly in the browser.
  • Example Selector: Browse categorized examples for learning.
  • Network Information: View real-time chain stats.
  • Integrated Transaction Builder: Construct and inspect transactions directly from our dashboard, simplifying blockchain interaction.
  • Full XCM Functionality: Execute Cross-Consensus Message Format transactions seamlessly between Paseo and other compatible parachains. Test cross-chain interactions in a controlled environment.
  • Full Blockchain Access: Every component you build in PAPI Simulator has 100% functional blockchain access. For instance, a DAO delegation component will truly operate and interact with the network directly from the console, enabling real-time testing and experimentation with on-chain logic.

Our Roadmap & Addressing Community Feedback

We’re in an aggressive expansion phase. Our comprehensive roadmap includes:

  • Enhanced Code Editor: TypeScript features for Polkadot API, including autocompletion and type checking.
  • React Component Preview: Real-time rendering of components as they’re edited.
  • State Management System: Connect React components to blockchain data with specialized hooks.
  • Polkadot API Integration: Core layers for interacting with multiple networks simultaneously.
  • Parachain Support Framework: Extensible architecture for parachain-specific functionality.
  • Component Templates: Pre-built solutions for common blockchain interactions.
  • Export System: Functionality to export components for production use.

A huge thank you to @evgeny-s and @byteme for your detailed, constructive feedback. Your insights on theme clarity, element visibility, and the editor’s capabilities were fundamental to our refinement. We acknowledge that our initial state didn’t meet all expectations, and I want to emphasize that many of the issues you raised are actively addressed through our roadmap and new features like the transaction builder and XCM support. Your scrutiny ensures PAPI Simulator becomes a truly useful and complete tool, elevating the quality standard for the Polkadot ecosystem.

Fast Grants Completed!

Great news: we’ve successfully delivered both milestones of the Fast Grants program. This proves our commitment and execution capability, with promised functionalities already implemented and operational.

Next Step: Polkadot OpenGov - Vote AYE!

With Fast Grants complete and a solid foundation built, PAPI Console is now seeking the next level of community support. We’ve officially applied to Polkadot OpenGov with Proposal #1639. This is a crucial step to fully realize PAPI Simulator’s potential, integrate advanced features, and ensure its long-term sustainability as a vital ecosystem tool.

Your participation in this voting process is essential for us to continue enhancing Polkadot development. If you see the value and potential of PAPI Console to make Polkadot more accessible and drive innovation, please consider voting AYE on our OpenGov proposal!

:backhand_index_pointing_right: Vote AYE here: https://polkadot.subsquare.io/referenda/1639

How This Benefits the Ecosystem

PAPI Interactive Console fills a critical gap in the Polkadot developer experience:

  • Lowers Entry Barriers: Web developers can leverage existing knowledge.
  • Accelerates Development: Instant testing and iteration on blockchain interactions.
  • Enhances Education: Learn by doing with immediate feedback.
  • Fosters Experimentation: Try novel approaches without costly setup.
  • Simplifies Parachain Onboarding: Templates for parachain-specific interactions.

We believe this tool will significantly expand the Polkadot developer ecosystem, making blockchain development accessible to millions of React developers worldwide.

Connect With Us

We’re passionate about making Polkadot development more accessible and efficient. PAPI Interactive Console represents our commitment to reducing friction for developers and accelerating the growth of the Polkadot ecosystem.

Looking forward to your thoughts and feedback!

Fred (codingsh) - aipop.fun Team