Self-Hosted CDN

cdn.startwebsite.ir

فهرست کتابخانه‌ها (۲۷ کتابخانه + ۴۶ فونت)

Tailwind CSSv4.0
Alpine.jsv3.14
Axiosv1.7
Lodashv4.17
Font Awesomev6.5
Material Iconsv1.13
Heroiconsv2.1
AOSv2.3
GSAPv3.14
Motion Onev11
Swiperv11
EChartsv5.5
Three.jsr160
Tippy.jsv6.3
SweetAlert2v11
Lottiev5.12
Jalali Momentv3.3
Survey.jsv1.9
Kama Datepickerv1.5
Leafletv1.9
Video.jsv8.10
Grid.jsv6.0
Quillv1.3
Dropzonev5.9
Dropzonev5.9
Prism.jsv1.29
Image FetcherCustom
Vazirmatn + فونت‌ها۴۶ فونت

Tailwind CSS

Tailwind CSS v4.0

فریم‌ورک CSS با پشتیبانی RTL

<script src="https://cdn.startwebsite.ir/tailwindcss/4.0/tailwind.min.js"></script>

نمونه RTL (راست به چپ)

bg-gradient-to-l

گرادیان از راست به چپ

ps-6 border-s-4

Padding و Border از سمت شروع (راست در RTL)

pe-6 border-e-4

Padding و Border از سمت پایان (چپ در RTL)

start center end

کلاس‌های RTL

کلاس توضیح در RTL
ps-*padding-startpadding-right
pe-*padding-endpadding-left
ms-*margin-startmargin-right
me-*margin-endmargin-left
border-s-*border-startborder-right
border-e-*border-endborder-left
start-*position startright
end-*position endleft

Font Awesome 6

Font Awesome 6.5 Free

بیش از 2000 آیکون رایگان

<link rel="stylesheet" href="https://cdn.startwebsite.ir/fontawesome/6.5/css/all.min.css">

استایل‌های آیکون

Solid

fa-solid

Regular

fa-regular

Brands

fa-brands

آیکون‌های پرکاربرد

آیکون‌های شبکه‌های اجتماعی

Heroicons

Heroicons 2.1

آیکون‌های SVG توسط تیم Tailwind CSS

<!-- Outline (24x24) -->
<img src="https://cdn.startwebsite.ir/heroicons/2.1/optimized/24/outline/home.svg">

<!-- Solid (24x24) -->
<img src="https://cdn.startwebsite.ir/heroicons/2.1/optimized/24/solid/home.svg">

اندازه‌ها

24x24 Outline

24x24 Solid

20x20 Mini

آیکون‌های پرکاربرد (Outline)

آیکون‌های پرکاربرد (Solid)

Material Icons

favorite

Material Icons

آیکون‌های گوگل - 5 استایل مختلف

<link rel="stylesheet" href="https://cdn.startwebsite.ir/material-icons/iconfont/material-icons.css">

<!-- استفاده -->
<span class="material-icons">home</span>
<span class="material-icons-outlined">home</span>
<span class="material-icons-round">home</span>
<span class="material-icons-sharp">home</span>
<span class="material-icons-two-tone">home</span>

استایل‌های مختلف

home

Filled

home

Outlined

home

Round

home

Sharp

home

Two-Tone

آیکون‌های پرکاربرد

home
person
email
phone
search
settings
favorite
star
check_circle
cancel
delete
edit

AOS - Animate On Scroll

AOS 2.3

انیمیشن‌های اسکرول

<link rel="stylesheet" href="https://cdn.startwebsite.ir/aos/2.3/aos.min.css">
<script src="https://cdn.startwebsite.ir/aos/2.3/aos.min.js"></script>

<script>
  AOS.init();
</script>

<!-- استفاده -->
<div data-aos="fade-up">محتوا</div>
<div data-aos="fade-left" data-aos-delay="200">با تاخیر</div>

نمونه انیمیشن‌ها

fade-up

fade-down

fade-left

fade-right

zoom-in

zoom-out

flip-up

flip-left

لیست انیمیشن‌ها

Fade

fade-up, fade-down, fade-left, fade-right, fade-up-right, fade-up-left, fade-down-right, fade-down-left

Zoom

zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right, zoom-out, zoom-out-up, zoom-out-down

Flip & Slide

flip-up, flip-down, flip-left, flip-right, slide-up, slide-down, slide-left, slide-right

GSAP

GSAP 3.14

قدرتمندترین کتابخانه انیمیشن جاوااسکریپت

<!-- Core -->
<script src="https://cdn.startwebsite.ir/gsap/3.14/gsap.min.js"></script>

<!-- Plugins -->
<script src="https://cdn.startwebsite.ir/gsap/3.14/ScrollTrigger.min.js"></script>
<script src="https://cdn.startwebsite.ir/gsap/3.14/TextPlugin.min.js"></script>

<script>
  // ثبت پلاگین‌ها
  gsap.registerPlugin(ScrollTrigger, TextPlugin);
  
  // انیمیشن ساده
  gsap.to(".box", { x: 100, duration: 1 });
  
  // با ScrollTrigger
  gsap.to(".box", {
    x: 100,
    scrollTrigger: {
      trigger: ".box",
      start: "top center",
    }
  });
</script>

فایل‌های موجود

gsap.min.js

کتابخانه اصلی (72KB)

ScrollTrigger.min.js

انیمیشن با اسکرول (44KB)

TextPlugin.min.js

انیمیشن متن (10KB)

نمونه زنده

1
2
3
4

Swiper.js

Swiper 11

اسلایدر حرفه‌ای با امکانات فراوان

<link rel="stylesheet" href="https://cdn.startwebsite.ir/swiper/11/swiper-bundle.min.css">
<script src="https://cdn.startwebsite.ir/swiper/11/swiper-bundle.min.js"></script>

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">اسلاید 1</div>
    <div class="swiper-slide">اسلاید 2</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<script>
  new Swiper('.mySwiper', {
    pagination: { el: '.swiper-pagination' },
    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }
  });
</script>

نمونه زنده

Slide 1
Slide 2
Slide 3
Slide 4

ECharts

ECharts 5.5

کتابخانه نمودار تعاملی Apache

<script src="https://cdn.startwebsite.ir/echarts/5.5/echarts.min.js"></script>

<div id="chart" style="width: 100%; height: 400px;"></div>

<script>
  var chart = echarts.init(document.getElementById('chart'));
  chart.setOption({
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150, 80, 70], type: 'bar' }]
  });
</script>

نمونه زنده

Three.js

Three.js r160

کتابخانه گرافیک سه‌بعدی WebGL

<script src="https://cdn.startwebsite.ir/threejs/r170/three.min.js"></script>

<script>
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  
  camera.position.z = 5;
  
  function animate() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  renderer.setAnimationLoop(animate);
</script>

نمونه زنده

Motion One

Motion 11

انیمیشن سبک و سریع برای Vanilla JS

<script src="https://cdn.startwebsite.ir/motion/11/motion.min.js"></script>

<script>
  const { animate, stagger } = Motion;
  
  animate(".box", { opacity: 1, y: 0 }, { duration: 0.5 });
  
  // با stagger
  animate(".items", { x: 100 }, { delay: stagger(0.1) });
</script>

نمونه زنده

Alpine.js

Alpine.js 3.14

فریم‌ورک reactive سبک و قدرتمند

<script src="https://cdn.startwebsite.ir/alpinejs/3.14/alpine.min.js" defer></script>

<!-- Counter -->
<div x-data="{ count: 0 }">
  <button @click="count++">+</button>
  <span x-text="count"></span>
</div>

<!-- Toggle -->
<div x-data="{ open: false }">
  <button @click="open = !open">نمایش</button>
  <div x-show="open" x-transition>محتوا</div>
</div>

نمونه زنده

Counter

0

Toggle

محتوای مخفی 🎉

Dropdown

گزینه ۱
گزینه ۲
گزینه ۳

Jalali Moment

Jalali Moment 3.3

تبدیل تاریخ شمسی و میلادی

<script src="https://cdn.startwebsite.ir/jalali-moment/3.3/jalali-moment.min.js"></script>

<script>
  // تاریخ امروز به شمسی
  moment().locale('fa').format('YYYY/MM/DD');
  
  // تبدیل میلادی به شمسی
  moment('2024-03-20').locale('fa').format('jYYYY/jMM/jDD');
  
  // تبدیل شمسی به میلادی
  moment('1402/12/30', 'jYYYY/jMM/jDD').format('YYYY-MM-DD');
</script>

نمونه زنده

تاریخ امروز (شمسی)

...

تاریخ امروز (میلادی)

...

تاریخ کامل

...

Axios

Axios 1.7

کتابخانه HTTP Client

<script src="https://cdn.startwebsite.ir/axios/1.7/axios.min.js"></script>

<script>
  // GET request
  axios.get('/api/users')
    .then(res => console.log(res.data))
    .catch(err => console.error(err));
  
  // POST request
  axios.post('/api/users', { name: 'علی', email: 'ali@test.com' })
    .then(res => console.log(res.data));
  
  // Async/Await
  const response = await axios.get('/api/data');
</script>

ویژگی‌ها

Promise-based
Interceptors
Error Handling
Request Cancellation
JSON Transform
XSRF Protection

Lodash

Lodash 4.17

توابع کمکی JavaScript

<script src="https://cdn.startwebsite.ir/lodash/4.17/lodash.min.js"></script>

_.chunk([1, 2, 3, 4], 2);  // [[1,2], [3,4]]
_.uniq([1, 1, 2, 3]);       // [1, 2, 3]
_.debounce(fn, 300);        // Debounce function
_.cloneDeep(obj);           // Deep clone

Tippy.js

Tippy.js 6.3

Tooltip حرفه‌ای

<link rel="stylesheet" href="https://cdn.startwebsite.ir/tippy/6.3/tippy.css">
<script src="https://cdn.startwebsite.ir/tippy/6.3/popper.min.js"></script>
<script src="https://cdn.startwebsite.ir/tippy/6.3/tippy.min.js"></script>

tippy('#myButton', { content: 'سلام!' });

نمونه زنده

SweetAlert2

SweetAlert2 11

Alert های زیبا

<script src="https://cdn.startwebsite.ir/sweetalert2/11/sweetalert2.min.js"></script>

Swal.fire('سلام!', 'این یک پیام است', 'success');
Swal.fire({ title: 'آیا مطمئنید؟', icon: 'warning', showCancelButton: true });

نمونه زنده

Lottie

Lottie 5.12

پخش انیمیشن After Effects

<script src="https://cdn.startwebsite.ir/lottie/5.12/lottie.min.js"></script>

lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'animation.json'
});

Survey.js

Survey.js 1.9

فرم‌ساز دینامیک با JSON

<link rel="stylesheet" href="https://cdn.startwebsite.ir/surveyjs/1.9/survey.min.css">
<script src="https://cdn.startwebsite.ir/surveyjs/1.9/survey.core.min.js"></script>

const surveyJson = {
  title: "فرم ثبت‌نام",
  elements: [
    { type: "text", name: "name", title: "نام" },
    { type: "dropdown", name: "city", title: "شهر", 
      choices: ["تهران", "اصفهان", "شیراز"] },
    { type: "rating", name: "rate", title: "امتیاز" }
  ]
};

ویژگی‌ها

فرم از JSON
Validation داخلی
پشتیبانی RTL
20+ نوع سوال
دانلود فایل
چند صفحه‌ای

Kama Datepicker

Kama Datepicker 1.5

تقویم شمسی سبک و ساده (No jQuery)

<link rel="stylesheet" href="https://cdn.startwebsite.ir/kama-datepicker/1.5/kamadatepicker.min.css">
<script src="https://cdn.startwebsite.ir/kama-datepicker/1.5/kamadatepicker.min.js"></script>

<input type="text" id="date-input">
<script>
    kamaDatepicker('date-input', {
        buttonsColor: "red",
        forceFarsiDigits: true
    });
</script>

نمونه زنده

Leaflet Map

Leaflet 1.9

نقشه تعاملی (جایگزین Google Maps)

<link rel="stylesheet" href="https://cdn.startwebsite.ir/leaflet/1.9/leaflet.css">
<script src="https://cdn.startwebsite.ir/leaflet/1.9/leaflet.js"></script>

<div id="map" style="height: 300px;"></div>
<script>
    var map = L.map('map').setView([35.6892, 51.3890], 13); // Tehran
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    L.marker([35.6892, 51.3890]).addTo(map).bindPopup('تهران').openPopup();
</script>

نمونه زنده

Video.js

Video.js 8.10

پخش‌کننده ویدیو حرفه‌ای

<link rel="stylesheet" href="https://cdn.startwebsite.ir/videojs/8.10/video-js.css">
<script src="https://cdn.startwebsite.ir/videojs/8.10/video.min.js"></script>

<video class="video-js vjs-default-skin vjs-big-play-centered" controls>
    <source src="my-video.mp4" type="video/mp4">
</video>

نمونه زنده

Grid.js

Grid.js 6.0

جدول پیشرفته با پشتیبانی RTL

<link rel="stylesheet" href="https://cdn.startwebsite.ir/gridjs/6.0/mermaid.min.css">
<script src="https://cdn.startwebsite.ir/gridjs/6.0/gridjs.umd.js"></script>
<div id="table"></div>

<script>
  new gridjs.Grid({
    columns: ["نام", "ایمیل", "شماره"],
    data: [
      ["علی", "ali@example.com", "09121111111"],
      ["رضا", "reza@example.com", "09122222222"]
    ],
    search: true,
    pagination: true,
    sort: true,
    language: { 'search': { 'placeholder': 'جستجو...' } }
  }).render(document.getElementById("table"));
</script>

نمونه زنده

Quill Editor

Quill.js 1.3

ویرایشگر متن حرفه‌ای (Rich Text Editor)

<link rel="stylesheet" href="https://cdn.startwebsite.ir/quill/1.3/quill.snow.css">
<script src="https://cdn.startwebsite.ir/quill/1.3/quill.min.js"></script>

<div id="editor"></div>
<script>
  var quill = new Quill('#editor', { theme: 'snow' });
</script>

نمونه زنده

سلام! این یک متن نمونه در Quill Editor است.

می‌توانید متن را ویرایش کنید.

Dropzone

Dropzone 5.9

آپلود فایل به صورت Drag & Drop

<link rel="stylesheet" href="https://cdn.startwebsite.ir/dropzone/5.9/dropzone.min.css">
<script src="https://cdn.startwebsite.ir/dropzone/5.9/dropzone.min.js"></script>

<form action="/upload" class="dropzone" id="my-dropzone"></form>

نمونه زنده

فایل‌ها را اینجا رها کنید
یا برای انتخاب فایل کلیک کنید

Prism.js

Prism.js 1.29

Syntax Highlighting برای کدها

<link rel="stylesheet" href="https://cdn.startwebsite.ir/prism/1.29/prism-tomorrow.min.css">
<script src="https://cdn.startwebsite.ir/prism/1.29/prism.min.js"></script>
<!-- به صورت خودکار تگ‌های code را رنگی می‌کند -->

نمونه زنده

function helloWorld() {
    console.log("سلام دنیا!");
    const date = new Date();
    return date.toLocaleDateString('fa-IR');
}

Image Fetcher 🖼️

Image Fetcher Utility

دانلود خودکار تصاویر بر اساس کلمات کلیدی

<!-- فقط کافیست کلمه کلیدی را بنویسید -->
<img data-search="honeycomb" width="300" height="200" class="rounded">

<!-- چند کلمه کلیدی -->
<img data-search="nature,forest" width="300" height="200" class="rounded">

نمونه زنده (Keyword: honeycomb & nature)

data-search="honeycomb"

data-search="nature,water"

Vazirmatn ⭐

Vazirmatn v33

محبوب‌ترین فونت فارسی - Variable Font

<link rel="stylesheet" href="https://cdn.startwebsite.ir/fonts/persian-fonts.css">

<!-- استفاده -->
<p class="font-vazirmatn">متن با فونت وزیرمتن</p>
<p class="font-vazirmatn-bold">متن بولد</p>
<p class="font-vazirmatn-light">متن لایت</p>

وزن‌های مختلف

وزیرمتن - این یک متن نمونه است Thin (100)
وزیرمتن - این یک متن نمونه است Light (300)
وزیرمتن - این یک متن نمونه است Regular (400)
وزیرمتن - این یک متن نمونه است Medium (500)
وزیرمتن - این یک متن نمونه است SemiBold (600)
وزیرمتن - این یک متن نمونه است Bold (700)
وزیرمتن - این یک متن نمونه است ExtraBold (800)
وزیرمتن - این یک متن نمونه است Black (900)

فونت‌های B

بادر: این یک متن نمونه فارسی است - 1234567890 font-badr
باران: این یک متن نمونه فارسی است - 1234567890 font-baran
بردیا: این یک متن نمونه فارسی است - 1234567890 font-bardiya
کامپست: این یک متن نمونه فارسی است - 1234567890 font-compset
دعوت: این یک متن نمونه فارسی است - 1234567890 font-davat
الهام: این یک متن نمونه فارسی است - 1234567890 font-elham
اصفهان: این یک متن نمونه فارسی است - 1234567890 font-esfahan
فانتزی: این یک متن نمونه فارسی است - 1234567890 font-fantezy
فرناز: این یک متن نمونه فارسی است - 1234567890 font-farnaz
فردوسی: این یک متن نمونه فارسی است - 1234567890 font-ferdosi
حمید: این یک متن نمونه فارسی است - 1234567890 font-hamid
هلال: این یک متن نمونه فارسی است - 1234567890 font-helal
هما: این یک متن نمونه فارسی است - 1234567890 font-homa
جدید: این یک متن نمونه فارسی است - 1234567890 font-jadid
جلال: این یک متن نمونه فارسی است - 1234567890 font-jalal
کودک: این یک متن نمونه فارسی است - 1234567890 font-koodak
کوروش: این یک متن نمونه فارسی است - 1234567890 font-kourosh
لوتوس: این یک متن نمونه فارسی است - 1234567890 font-lotus
مهسا: این یک متن نمونه فارسی است - 1234567890 font-mahsa
مهر: این یک متن نمونه فارسی است - 1234567890 font-mehr
میترا: این یک متن نمونه فارسی است - 1234567890 font-mitra
مروارید: این یک متن نمونه فارسی است - 1234567890 font-morvarid
نرم: این یک متن نمونه فارسی است - 1234567890 font-narm
نسیم: این یک متن نمونه فارسی است - 1234567890 font-nasim
نازنین: این یک متن نمونه فارسی است - 1234567890 font-nazanin
رویا: این یک متن نمونه فارسی است - 1234567890 font-roya
ستاره: این یک متن نمونه فارسی است - 1234567890 font-setareh
شیراز: این یک متن نمونه فارسی است - 1234567890 font-shiraz
سینا: این یک متن نمونه فارسی است - 1234567890 font-sina
تبسم: این یک متن نمونه فارسی است - 1234567890 font-tabassom
تهران: این یک متن نمونه فارسی است - 1234567890 font-tehran
تیتر: این یک متن نمونه فارسی است - 1234567890 font-titr
تیتر TGE: این یک متن نمونه فارسی است - 1234567890 font-titrtge
ترافیک: این یک متن نمونه فارسی است - 1234567890 font-traffic
وحید: این یک متن نمونه فارسی است - 1234567890 font-vahid
یاقوت: این یک متن نمونه فارسی است - 1234567890 font-yagut
یاس: این یک متن نمونه فارسی است - 1234567890 font-yas
یکان: این یک متن نمونه فارسی است - 1234567890 font-yekan
زر: این یک متن نمونه فارسی است - 1234567890 font-zar
زیبا: این یک متن نمونه فارسی است - 1234567890 font-ziba

فونت‌های محبوب

ایران سنس: این یک متن نمونه فارسی است - 1234567890 font-iransans
ایران سنس Bold: این یک متن نمونه فارسی است - 1234567890 font-iransans + font-bold
یکان بخ Light: این یک متن نمونه فارسی است - 1234567890 font-yekan-bakh + font-light
یکان بخ Regular: این یک متن نمونه فارسی است - 1234567890 font-yekan-bakh
یکان بخ Bold: این یک متن نمونه فارسی است - 1234567890 font-yekan-bakh + font-bold

نحوه استفاده

<!-- اضافه کردن فونت‌ها به پروژه -->
<link rel="stylesheet" href="https://cdn.startwebsite.ir/fonts/persian-fonts.css">

<!-- استفاده از کلاس‌ها -->
<p class="font-nazanin">متن با فونت نازنین</p>
<p class="font-yekan-bakh">متن با فونت یکان بخ</p>
<p class="font-iransans">متن با فونت ایران سنس</p>

cdn.startwebsite.ir © 2026