Skip to main content
Pylon Elements are production-ready, embeddable components that provide complete loan application and borrower dashboard experiences. Instead of building these complex interfaces from scratch, with all their forms, validation, document handling, and compliance requirements, you can integrate Elements into your application and customize them to match your brand. Elements eliminate the need to build mortgage-specific UI components, handle complex form validation, manage document uploads, or implement disclosure workflows. They’re fully functional, production-tested components that you can drop into your application and start using immediately.

​
What are Elements?

Elements are JavaScript components that handle the entire mortgage application and management experience:
  • Loan Application Element - Complete end-to-end mortgage loan application with pre-approval. Handles all form collection, validation, credit pulls, and pre-approval calculations.
  • Borrower Dashboard Element - Full borrower portal for managing in-progress loans, communicating with loan officers, completing tasks, uploading documents, and tracking loan progress through all stages.

​
Key features

All Elements share these core characteristics:
  • Secure by design - Sensitive information (SSN, credit scores, income details, bank account numbers) never touches your frontend. Elements communicate directly with Pylon’s API using secure authorization leases, ensuring sensitive data only flows between Pylon’s servers and the Element.
  • Fully customizable - Theme and style Elements to match your brand using a comprehensive theming system with three levels of customization (Global, Component, and Page-level).
  • Production-ready - Built, tested, and maintained by Pylon. Elements handle edge cases, error states, validation, and all the complexities of mortgage origination workflows.
  • Framework-agnostic - Works with React (recommended), Vue, Angular, or vanilla JavaScript. The underlying implementation is framework-independent.
  • Compliance-built - Elements handle TRID disclosures, consent management, and other regulatory requirements automatically.
  • Responsive - Elements are fully responsive and work seamlessly on desktop, tablet, and mobile devices.

​
How Elements work

Elements communicate securely with the Pylon API using an authorization lease system. Here’s how it works:
  1. Backend authentication - Your backend authenticates with Pylon using OAuth 2.0 Client Credentials to get an access token.
  2. Contributor creation - When a user accesses an Element, your backend creates or retrieves a Contributor record in Pylon’s system for that user.
  3. Lease generation - Your backend requests an authorization lease from Pylon for the Contributor.
  4. Element rendering - The Element receives the lease and uses it to securely communicate with Pylon’s API, rendering the UI programmatically based on API responses.
  5. Secure data flow - All sensitive data flows directly between Pylon’s servers and the Element-your frontend never sees SSNs, credit scores, income details, or other sensitive information.
This architecture ensures that:
  • Your frontend never handles sensitive borrower data
  • Elements always have the latest loan information
  • The UI is automatically generated based on loan state
  • No manual synchronization is required between your app and Pylon
Elements are designed to take up most of the page for optimal display. Avoid displaying other UI elements on the same page to prevent visual conflicts.

​
Quick start

1

Set up authentication

Configure your backend to handle Pylon authorization requests. This is a one-time setup that all Elements will use.See Handling authentication for details.
2

Choose your Element

Start with the Loan Application Element for new applications, or the Borrower Dashboard Element for managing existing loans.
3

Install and integrate

Install the Elements library and add the component to your app. See the setup guides for each Element.
4

Customize

Optionally customize the theme to match your brand and set up polling to monitor loan status changes.

​
Installation

Install the Pylon Elements library using npm: 
npm install @pylonlending/react-elements --save
Or using yarn: 
yarn add @pylonlending/react-elements
Or using pnpm: 
pnpm add @pylonlending/react-elements
The following guides focus on React, which is the recommended approach. If you use another frontend framework (Vue, Angular, or vanilla JavaScript), please reach out to your Pylon Point of Contact. The Pylon platform is flexible and designed to work with many frontend frameworks, but React has the most comprehensive documentation and examples.

​
When to use Elements vs. the API

Elements are ideal when you want to:
  • Launch quickly - Get to market faster without building complex mortgage UI components
  • Reduce development time - Focus on your core product instead of mortgage-specific features
  • Ensure compliance - Let Pylon handle TRID disclosures, consent management, and regulatory requirements
  • Maintain consistency - Use proven, tested UI patterns that borrowers are familiar with
  • Customize appearance - Match Elements to your brand while keeping the functionality intact
Use the GraphQL API directly when you need:
  • Complete UI control - Build every aspect of the user interface from scratch
  • Custom workflows - Implement non-standard application flows
  • Unique integrations - Integrate mortgage features into existing complex workflows
  • Full customization - Control every detail of the user experience
You can also use a hybrid approach: Use Elements for the core application and dashboard experiences, and use the GraphQL API to pre-fill borrower data before initializing Elements. When you add information via the API (such as borrower personal information, income, assets, or property details), that data will automatically be pre-filled in the Element when it’s initialized, saving borrowers time and creating a seamless experience.

​
Next steps