Forem: Exaland App

Database Pilot for VSCODE

Exaland App — Thu, 09 Apr 2026 01:05:59 +0000

🛢️ Database Pilot

A powerful, all-in-one

database & file client for Visual Studio Code

VS Code Marketplace

Logo

Buy Me A Coffee

✨ Features at a Glance
Category

Supported

🗄️ SQL Databases

MySQL · MariaDB · PostgreSQL · SQLite · SQL Server · ClickHouse · 达梦 (DM)

🧩 NoSQL

Redis · MongoDB · ElasticSearch · Cassandra

☁️ Cloud / Storage

AWS S3 · Azure Blob Storage · FTP · Firebase / Firestore

🖥️ Remote

SSH Client · SSH Tunnel · SFTP

📁 File Explorer

Local · AWS S3 · Azure Blob — multi-select, delete, export, image & video preview

🚀 Installation
Install from the VS Code Marketplace or Open VSX.

ext install exaland.database-pilot

🗄️ Database Connections
Connect
Open the Database Explorer panel in the sidebar.
Click the + button to add a new connection.
Select your database type, fill in the connection details, then click Connect.
connection

Browse & Edit Tables
Click a table to open the interactive table view.
Inline editing, filtering, pagination, and column sorting are all supported.

Download Here Execute SQL Queries

Add demo page on GitHub Pages Fix Mobile support (touch events)

Exaland App — Wed, 08 Apr 2026 11:44:27 +0000

Exaland App

Apr 3

A scratchcard component for React

Comments

2 min read

A scratchcard component for React

Exaland App — Fri, 03 Apr 2026 15:35:15 +0000

react-scratchingcard

A scratchcard component for React

Original repo by Aleksik (not maintained)

https://github.com/aleksik/react-scratchcard

Improvement ✨

Resize the image using width and height props (in the original repo, the image was croped)
Smooth fade out animation on scratch complete
Add type definition (ts)
Change brush size through props
Use custom brush through props
Define a custom check zone through props

Demo

Install

npm install --save react-scratchingcard

yarn add react-scratchingcard

Usage

import React, { useRef }  from 'react';
import ScratchCard from 'react-scratchingcard';

import * as IMG from './img.jpg';

const App = () => {

  const ref = useRef<ScratchCard>(null);

  const onClickReset = () => {
    ref.current && ref.current.reset();
  }

  return (
    <div>
      <button onClick={onClickReset}>Reset</button>
      <ScratchCard
        width={320}
        height={226}
        image={IMG}
        finishPercent={80}
        onComplete={() => console.log('complete')}
      >
        <div style={{
          display: 'flex',
          width: '100%',
          height: '100%',
          alignItems: 'center',
          justifyContent: 'center'
        }}
        >
          <h1>Scratch card</h1>
        </div>
      </ScratchCard>
    </div>
  );
};

Custom brush

const App = () => {
  return (
    <div>
      <ScratchCard
        width={320}
        height={226}
        image={IMG}
        finishPercent={80}
        customBrush={{
          image: require('./brush.img'),
          width: 15,
          height: 15
        }}
      >
        <h1>Scratch card</h1>
      </ScratchCard>
    </div>
  );
};

or you can use CUSTOM_BRUSH_PRESET object

import { CUSTOM_BRUSH_PRESET } from 'react-scratchingcard';

const App = () => {
  return (
    <div>
      <ScratchCard
        width={320}
        height={226}
        image={IMG}
        finishPercent={80}
        customBrush={CUSTOM_BRUSH_PRESET}
      >
        <h1>Scratch card</h1>
      </ScratchCard>
    </div>
  )
}

Type

Props

name	type	default
width	number
height	number
image	File \	string \
imageCrossOrigin	?'' \	'anonymous' \
finishPercent	?number	70
brushSize	?number	20
fadeOutOnComplete	?boolean	true
onComplete	?callback
customBrush	?CustomBrush
customCheckZone	?CustomCheckZone

Remote URL

<ScratchCard
  width={320}
  height={226}
  image='https://cdn.example.com/scratch-cover.jpg'
  imageCrossOrigin='anonymous'
>
  <h1>Scratch card</h1>
</ScratchCard>

Note: pour calculer le pourcentage gratté (finishPercent) avec une image distante, le serveur distant doit autoriser CORS.

Le composant n'impose plus CORS par defaut pour une URL distante. imageCrossOrigin est utile seulement si ton serveur renvoie deja les en-tetes CORS voulus.

CustomBrush

name	type
width	number
height	number
image	File or Base64

CustomCheckZone

name	type
x	number
y	number
width	number
height	number

License

MIT © exaland

New Update! 1.0.2 New UI/UX Add Topic Live Editor

Exaland App — Wed, 25 Mar 2026 23:42:45 +0000

Exaland App

Mar 23

MQTT Explorer - VSCode Extension

#vscode #mqtt

Comments

1 min read

New update !!!

Exaland App — Mon, 23 Mar 2026 14:41:25 +0000

Exaland App

Dec 14 '25

🖥️ SSH Manager - VS Code Extension

#vscode #ssh

Comments

2 min read

[Boost]

Exaland App — Mon, 23 Mar 2026 14:39:41 +0000

Exaland App

Feb 18

react-text-underline Premium highlighting & underlining components for React.

#showdev #react #tailwindcss #ui

Comments 1

1 min read

MQTT Explorer - VSCode Extension

Exaland App — Mon, 23 Mar 2026 14:30:49 +0000

MQTT Explorer (VS Code Extension)

This extension adds an MQTT view to VS Code:

Connection to an MQTT broker
Saveable connection profiles
Automatic subscription to #
Topic filtering
Topic tree navigation
Inspection of the last message received on a topic
Live panel to follow a topic in real time
Posting messages

Quick Start

Open the MQTT Explorer view in the file explorer.
Run the MQTT Explorer: Connect command.

Orders

MQTT Explorer: Connect
MQTT Explorer: Open Connection Manager
MQTT Explorer: Connect Profile
MQTT Explorer: Save Connection Profile
MQTT Explorer: Delete Connection Profile
MQTT Explorer: Disconnect
MQTT Explorer: Publish Message
MQTT Explorer: Inspect Message
MQTT Explorer: Copy Topic
MQTT Explorer: Set Topic Filter
MQTT Explorer: Clear Topic Filter
MQTT Explorer: Open Live Topic

Notes

Supported protocols: mqtt, mqtts, ws, wss
The extension displays the last payload seen for each topic.

New Library for React Design

Exaland App — Sun, 22 Feb 2026 12:37:31 +0000

react-text-underline Premium highlighting & underlining components for React.

Exaland App ・ Feb 18

#react #showdev #tailwindcss #ui

react-text-underline Premium highlighting & underlining components for React.

Exaland App — Wed, 18 Feb 2026 22:57:38 +0000

react-text-underline

Author: Exaland Concept - Alexandre MAGNIER

Premium highlighting & underlining components for React.

Demonstration

Online Demonstration

8 animated variants: marker, brushstroke, gradient, slide, glow, scratch, double, wave.

Installation

npm install react-text-underline
# or
yarn add react-text-underline
# or
pnpm add react-text-underline

This component uses Tailwind CSS classes. Make sure Tailwind is configured in your project.

Usage

import TextHighlight from 'react-text-underline';

<TextHighlight variant="marker" color="yellow">

express delivery
</TextHighlight>

Variants

| Variant | Description |

|----------------|-------------------------------------------|
| marker | Fluorescent marker on hover |

| brushstroke | SVG brush stroke under text |

| gradient | Animated gradient underline on hover |

| slide | Colored background that slides from the left |

| glow | Glowing text with colored halo |

| scratch | Irregular pencil stroke |

| double | Elegant double line |

| wave | SVG wavy underline |

Available Colors

yellow · cyan · green · pink · orange · purple · blue · red · neonCyan · neonPurple · neonGreen

Props

|-------------|--------------------|------------|--------------------------------------|
| variant | HighlightVariant | 'marker' | Highlight Style |

Examples

// Permanent Brushstroke (no hover)
<TextHighlight variant="brushstroke" color="cyan" animate={false}>
mobile applications
</TextHighlight>

// Gradient Underline on Hover
<TextHighlight variant="gradient" color="purple">

Discover
</TextHighlight>

// Sliding Background
<TextHighlight variant="slide" color="green">

proven
</TextHighlight>

// Neon Glow Text
<TextHighlight variant="glow" color="neonCyan">
BRAND NAME
</TextHighlight>

// Permanent Pencil Line
<TextHighlight variant="scratch" color="orange" animate={false}>
custom
</TextHighlight>

// Double Line
<TextHighlight variant="double" color="pink">
expertise
</TextHighlight>

// Wavy Underline
<TextHighlight variant="wave" color="blue">
solutions turnkey
</TextHighlight>

Build

npm run build

License

MIT

EXACountryPicker is a country picker controller for iOS13+ with an option to search

Exaland App — Tue, 17 Feb 2026 08:03:35 +0000

EXACountryPicker

EXACountryPicker is a country picker controller for iOS13+ with an option to search. The list of countries is based on the ISO 3166 country code standard (http://en.wikipedia.org/wiki/ISO_3166-1). Also and the library includes a set of 250 public domain flag images.

The picker provides:

Country Names
Country codes - ISO 3166
International Dialing Codes
Flags
New (Design + “Smart” features)

CocoaPods Installation

use_frameworks! pod 'EXACountryPicker', '~> 1.0.3'

Via Package.swift:
Add the following to your Package.swift file:

dependencies: [ .package(url: "https://github.com/exaland/EXACountryPicker.git", from: "1.0.3") ]

Screenshot Mockup Generator Figma Plugin

Exaland App — Fri, 30 Jan 2026 13:20:26 +0000

Screenshot Mockup Generator Figma Plugin

Figma plugin to automatically generate device mockups (iPhone, iPad, MacBook, etc.) from your Figma screens and frames.

Download Plugin Now

VSCode Database Extension 🚀

Exaland App — Mon, 19 Jan 2026 21:44:43 +0000

Database Pilot
This repository contains the public source code.
The PRO Version are Available in Extra just BuymeCoffee for get it

This project is a database client for Visual Studio Code, supporting the management MySQL/MariaDB, PostgreSQL, SQLite, Redis, ClickHouse, 达梦, and ElasticSearch, and works as an SSH client, boost your maximum productivity!

Experimental: Firestore (Firebase) browsing support has been added to the NoSQL view (collections and first 50 documents).